I'm trying to code an accessibile sortable list widget.

It works quite well using a keyboard and a screen reader, but feedbacks would be really appreciated. #a11y

Demo: codepen.io/fcalderan/pe...

Venice, San Marco Place at sunset, today.

Chromium: Intent to Ship in v133
#CSS `text-box`, `text-box-trim` and `text-box-edge`

groups.google.com/a/chromium.o...

this feature is RAD.

try it in Canary with this syntax explorer visualizer tool I'm hackin on
codepen.io/argyleink/fu...

I was finally able to generate a chart about the Italy's grid consumption for the last 23 hours.

Next step is just to automate this, once per day.

Joeri has a dedicated website which gives you an overview of the major techniques used to make web sites and web applications without making use of build tools or frameworks.

plainvanillaweb.com

You should check it out.

CSS for detecting device posture 🥼

@​media (device-posture: folded) {
h1 span:first-of-type { opacity: 0.25; }
}

some cool future opportunities 🤙

Wait, is there no bookmark functionality in bluesky or am I missing something?

Seriously, I thought Mike Portnoy was the best drummer in the world but Ben Shanbrom is definitely the most amazing drummer in whole galaxy, he can't be human.

m.youtube.com/watch?v=aUd0...

A #CSS -only version of minesweeper (but made with sharks 🦈) using custom props and style queries.

You can arrange the sharks as you prefer to make a new pattern, the cells around with the hints will automatically update.

Codepen
codepen.io/fcalderan/fu...

🚀 New Interactive Article: Overflow Clip

Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.

🔗 ishadeed.com/article/over...

#tinyCSStip
Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`, which was given as a hex or keyword value?

No need to convert to rgb() or hsl() anymore!

#CSS

Ho creato un canale su Telegram, una raccolta curata di notizie sul mondo dell'energia #nucleare, informazioni e materiale divulgativo.

Se volete dare un'occhiata e/o iscrivervi il link è t.me/mensnucleare

As of Chrome 131 you have more options to style `

` and `

`.

You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.

developer.chrome.com/blog/styling...

For this edition of the CODE100 challenge, I built a web site with tons of accessibility issues. Send us your report what is broken and secure your place in the CODE100 final next year at the WeAreDevelopers World Congress.
www.wearedevelopers.com/magazine/fin...

One of my favorite 2-line #CSS snippets:

it creates a responsive grid layout with columns that automatically adjust in size. Each column has a minimum width of --min (`30ch` in the example) and expand up to `1fr` to fit the available space.

Code in action: codepen.io/fcalderan/fu...

A #CSS hover effect by animating the grid-template-columns and gap properties of a 2-column grid element:

.link {
grid-template-columns: auto var(--len, 0fr);
gap: var(--gap, 0);
transition: .33s;
&:is(:hover, :focus) {
--len: 1fr;
--gap: .5rem;
}

Code in the reply 👇🏻