.bathroom {
width: fit-content;
}

#memes #css

I disagree with use cases that rely on CSS, generally at risk from network interruptions and caching, to trigger programmatic state changes in the HTML that references it (see pic). Cart / horse and all.

Instead, use CSS to ensure your programmatic state is correct. Eg: adrianroselli.com/2021/06/usin…

#a11y #accessiblity #css #html

: it was already installed on my Google Pixel 6 Pro - without anybody asking whether I agree with this shit.

Just uninstalled it.

#CameraInYourBathroom #ClientSideScanning #AndroidSystemSafetyCore #CSS #ChatControl #Privacy #BigBrother #BigTechIsEvil #GoogleIsEvil #WhatAreTheySmoking

Would have been nice to have a :focus-visible-within, but you can achieve pretty much the same with :has(:focus-visible)

Magic of CSS.

#css

New year, new role @Mastodon!

Our core team is looking for a senior Front-end Developer to elevate the web UI/UX experience for our users.

Ideally:

1. You are highly skilled in accessible and semantic #HTML
2. Proficient in modern #CSS
3. Experienced with #Javascript, #Typescript and complex React/Redux applications

This remote full-time position requires a 4-hour overlap with the CET timezone.

For more info/to apply:
jobs.ashbyhq.com/mastodon/6a09…

#FediHire #GetFediHired #hiring #frontend

Front-end Developer (m/f/d)

We're looking for a Front-end Developer to work with us remotely on our free and open-source Mastodon software.

^{jobs.ashbyhq.com}

Good morning #fediverse !

I'm feeling #KISS today...

« Keep
IT
Simple
Stupid »

(Amazing, how many things you can do with just simple,

#html
+
#css
+
#javascript

cc @cferdinandi ... who amongst others, inspired me , thX

New blog post: “Short Lines, Bad Breaks, and CSS”

blog.kizu.dev/short-lines-bad-…

In today’s CSSWG meeting, there was one issue about the new value of `text-wrap-style` property — `avoid-orphans`.

There was agreement in the meeting that we should look for a better name, and open a separate issue about this, which I did, as well as opened another one — about the `orphans` and `widows` properties.

#CSS #Typography

Semantic websites are awesome! Among other things, they let you write reusable CSS. Please send me your semantic websites, so I can analyze them for common patterns and write a composable CSS framework.

jak2k.schwanenberg.name/post/c…

#indieweb #smolweb #semanticHTML #html #semantic #css #semanticcss

People on StackOverflow telling people to screw up #accessibility with the HTML dialog element defeats the purpose of using that element in the first place IMO. Please upvote my answer that corrects the numerous wrong answers, including the accepted answer, to this question if you have an SO account.

stackoverflow.com/a/79028606/2…

#webDev #a11y #html #css #javaScript

The CSSWG as agreed to publish a first Working Draft for Masonry layout – with the two major proposals merged where possible, and otherwise presented side by side. Most of the differences are syntax only.

Here's the Editor's Draft that will be published:

drafts.csswg.org/css-grid-3/

And the discussion:

github.com/w3c/csswg-drafts/is…

#css

Don't Use JS for That: Moving Features to CSS and HTML by Kilian Valkhof 👏

Of course, ensure it's accessible – especially the scroll example in this presentation.

youtube.com/watch?v=IP_rtWEMR0… #webdev #webdevelopment #javascript #css

Now in #Firefox DevTools 129: massive performance improvements, @starting-style support and accessibility fixes:

fxdx.dev/firefox-devtools-news…

#webDev #CSS #webperf

alt text in #CSS generated `content` is now supported all modern browsers (as of firefox 128 and safari 17.4)

please hide your weird glyphs and icon fonts using an empty string like this:

```
content: "›";
content: "›" / "";
```

developer.mozilla.org/en-US/do…

content - CSS: Cascading Style Sheets | MDN

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element.

^{MDN Web Docs}

New post, another in my series of using the right lingo while also carrying the IKEA vibe:

“Be Careful Using ‘Grid’”
adrianroselli.com/2024/07/be-c…

I try to disambiguate between 8 different meanings of the word ‘grid’ in a web dev context.

#HTML #ARIA #CSS #accessibility #a11y

Be Careful Using ‘Grid’

TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want.

^{Adrian Roselli}

Why don’t we talk about minifying CSS anymore? blog.sentry.io/why-dont-we-tal…

Me: because Javascript is a much, much, much bigger problem for web performance.

#a11y #webdev #css #javascript #webperf

Why don’t we talk about minifying CSS anymore?

Remember Grunt files? Gulp files? We rarely need to think about CSS minification, chunking, splitting and post-processing anymore. Here's why.

^{Salma Alam-Naylor (Product Blog • Sentry)}

Checkout @alice update on GTK CSS 💅

blogs.gnome.org/alicem/2024/06…

So many goodies 🤩

• variables
• color()
• color-mix()
• relative colors
• rgb, hsl, linear srgb, hwb, oklab, oklch, ...
• math functions
• accent colors

#GTK #CSS #GNOME

I remember longing for proper skipping of descenders in #CSS. Now that skipping is default in most browser I’m often struck by how *terrible* it is for hyperlink legibility.

The first line in the image shows a linked line with text-decoration-skip-ink set to "auto".

The second line shows the same linked line with text-decoration-skip-ink set to "none".

Just by looking at the first line, you can’t say if it is multiple links or or not.

#ux #accessibility

Perhaps something for @Seirdy.

This piece from @heydon details his system for using the new features of #CSS to test HTML for proper semantics and structure. Just incredible what’s going on in some of these selectors.

#WebDev

heydonworks.com/article/testin…

Retro; the customizable clock widget is now available on Flathub in v2

What's new:

• 24/12h support (follows GNOME Settings)
• Energy usage optimizations
• Better support for round clocks
• Controls moved out of the way

What do you think of the floating header bar?

flathub.org/apps/re.sonny.Retr…

#GNOME #GTK #CSS #Flathub #Flatpak #Linux

This is so f***** up!! O_O

Be aware when you receive HTML emails (who doesn't?)!

gruene.social/@weddige/1121903…

#HTML #HTMLmail #CSS
#Phishing #SCAM
#SocialEngineering
#Thunderbird #Outlook
#KoboldLetters

Konstantin Weddige (@weddige@gruene.social)

Attached: 1 image Welcome to another edition of "Is this phishing?" Assume the email is in principle plausible and the transaction ID exists. What is the worst that can happen if you press send? #phishing

^{gruene.social}

S @heydon nesouhlasim temer v nicem, ale jeho clanky rozhodne stoji za to cist. Pokud jste nekompromisni zastanci filozofie "Pokud se ti nelibi CSS, tak ho jenom neumis dost dobre", tak budete chrochtat blahem.

Pro nas ostatni je to dilek do skladanky, jak nad frontend vyvojem uvazovat a hluboke zamysleni nad dogmatismem v IT.

heydonworks.com/article/what-i…

#css #tailwind

In “Techniques to Break Words” I quickly review:
`word-break`
`overflow-wrap`
`hyphens`
`<wbr>`
`­`
adrianroselli.com/2024/02/tech…

You can play around with the demo directly:
cdpn.io/aardrian/debug/eYoOdrX

#HTML #CSS

Techniques to Break Words

Photo by studio tdes. Used under CC BY 2.0 Deed. Image cropped and contrast enhanced. A few days ago Benjy Stanton asked about breaking long words in tables. I offered a suggestion, which may or may not have worked. I never asked.

^{Adrian Roselli}

Thrilled that @csswg just adopted CSS Color HDR as a work item (was previously an unofficial draft). #css #color #hdr

drafts.csswg.org/css-color-hdr…

"Most importantly, tooltips should only provide descriptive and non-essential text, giving slightly more detailed text for active elements such as links and form controls. Ultimately, they provide expendable text which is already on the web page."

htmhell.dev/adventcalendar/202…

Great in-depth article about #tooltips by Jan Hellbusch. He knows what he's talking about, had the pleasure to be in one of his workshops and he's an absolute pro. 🤯

#HTML #CSS #JavaScript #accessibility #a11y #HTMHell

Design pattern for custom tooltips - HTMHell

A collection of bad practices in HTML, copied from real websites.

^{Design pattern for custom tooltips - HTMHell}

About CSS prefers-reduced-transparency:

developer.chrome.com/blog/css-…

#UIDesign #CSS #usability #a11y

CSS prefers-reduced-transparency - Chrome for Developers

Optimize and adjust for users who prefer an opaque UI.

^{Chrome for Developers}