Seeing #CSS carousels being promoted as accessible again, so here is a periodic reminder:
#CSS carousels are not "accessible by default" sarasoueidan.com/blog/css-caro…
They are still highly experimental and there are still many open #accessibility questions & issues being discussed.
+The browser will not do everything for you—you'll still have work to do, too.
— The personal website of Sara Soueidan, inclusive Web UI engineerwww.sarasoueidan.com
I swear @heydon is always putting out the coolest stuff.
This is genuinely the coolest use of variable fonts I’ve ever seen.
heydonworks.com/article/hel-va…
Hel is a distorted Swiss variable font with three axesHeydon Pickering (HeydonWorks)
Incidentally, the company unleashing a new wave of contrast problems on the web (see today’s Codepen Spark for liquid glass copycats) is also the company that seems uninterested in supporting `prefers-reduced-transparency`:
developer.mozilla.org/en-US/do…
#CSS #Safari #accessibility #a11y
The prefers-reduced-transparency CSS media feature is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device.MDN Web Docs
My employer, after 7 months of work, fired me overnight. Because I would be too "finicky" about code quality and security risks, which would better suit "a bank or cybersecurity company".
So I'm again #lookingForJob, either at #Montpellier (France) or #fullRemote. I am a #fullStack #developer with almost 10 years of experience on #php, #symfony, #html, #css, #javascript (#jquery and I'm also learning #vue). I am fluent in English, both written and spoken.
Since yesterday, I have had an urge to play with CSS again, and it's the least practical time for it.
(Since work during the day and a brain that is currently saying no.)
There is a three-year-old article by Ryan Mulligan that has been living rent-free in my head for a while, and I recently applied it to a hobby project for the first time. I want to learn more about these techniques as I'm not fluent with them yet.
"Layout Breakouts with CSS Grid" featuring named template columns.
ryanmulligan.dev/blog/layout-b…
Extending elements beyond the content area with CSS Grid and named grid lines.ryanmulligan.dev
[New blog post]
Are CSS Carousels accessible? sarasoueidan.com/blog/css-caro…
In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec.
#a11y
– The personal website of Sara Soueidan, inclusive design engineersarasoueidan.com
Anchor Positioning and the Popover API for a JS-Free Site Menu
css-irl.info/anchor-positionin…
#css
A blog about CSS, front-end development, the web, and beyond.CSS { In Real Life } | Anchor Positioning and the Popover API for a JS-Free Site Menu
It used to be quite challenging to set the precedence of individual #CSS rules without a lot of headaches. (This encouraged the practice of authoring many small utility classes that do very little on their own.)
Thankfully, that’s no longer the case. Here’s a simple example: cloudfour.com/thinks/cowardly-…
Let’s make a more useful utility class without giving up any versatility.Cloud Four
All the Deets on the Mighty Details Tag 🙌
@geoff over at #CSS Tricks has written a definitive guide on using <details>, a number of possible use cases, and some of the trickier aspects of styling it and even animating the opening and closing states. I’ll be sure to refer to this the next time I do #WebDev on a <details>-based feature!
thathtml.blog/2025/02/all-the-…
One of the great unsung heroes of modern web UX.That HTML Blog
Is it possible to write advanced theming #CSS with context-aware conditional code? As if()! 😉
@chriskirknielsen shows us a glimpse of what's possible—just in Chrome Canary right now behind a flag, but here's hoping it gains ground soon.
On a related note, us #WebDev folks are eagerly awaiting container style queries in Firefox! Can it happen please pretty please with sugar on top??
thathtml.blog/2025/02/hot-off-…
Taking context-aware theming to a whole new level…one day.That HTML Blog
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
The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that…Adrian Roselli
: 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
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
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.
In today’s CSSWG meeting, there was one issue about the new value of `text-wrap-style` property — `avoid-orphans`.blog.kizu.dev
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:
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:
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…
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
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
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)
It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts.Smashing Magazine
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
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.
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.
heydonworks.com/article/testin…
CSS can be a great HTML testing tool, especially in 2024Heydon Pickering (heydonworks.com)
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
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? #phishinggruene.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…
Learn about utility-first CSS and what is meant by “utility“ in this contextHeydon Pickering (heydonworks.com)
An interactive guide on designing better target sizes on the web.ishadeed.com
Comparing two identically designed websites, their weight, amount of HTML and CSS, rendering speed, and best practices.nuejs.org
