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

https://heydonworks.com/article/testing-html-with-modern-css/

This is a very neat trick to unset max-height when an HTML element with resize='vertical' set in CSS is resized. So you can have elements initially displayed with a max-height but then resized beyond it:

https://stackoverflow.com/a/60286469

(Should work as is for resize='block' and with the selector tweaked to use "width" for horizontal/inline.)

#web #dev #tip #CSS #resize #maxHeight

.@heydon shares how he uses recent advances in CSS to perform detailed HTML testing without JavaScript. The technique is useful for accessibility audits, and can be applied independently across stacks.

https://heydonworks.com/article/testing-html-with-modern-css/

Hat tip: @pablolarah #frontend #html #CSS #testing

📝 Testing HTML With Modern CSS https://heydonworks.com/article/testing-html-with-modern-css/

(The last time I addressed this topic was circa 2016. It's amazing what you can write selectors for these days. Plus we have custom properties!)

#CSS #a11y

Hey, all! On stream today we'll be making more updates to the Andromeda website, making use of Eleventy - check them out at @eleventy, and come hang out with us in chat!

https://www.twitch.tv/martine_dowden

#webdev #Eleventy #11ty #HTML #CSS #JavaScript

Martine_Dowden - Twitch

Award winning CTO, UX / UI designer & developer / international speaker and author focusing on web interfaces that are beautiful, functional, accessible, and usable.

^Twitch

Light/dark mode simplified by the #CSS light-dark() function

https://pawelgrzybek.com/light-dark-mode-simplified-by-the-css-light-dark-function/ #frontend

Light/dark mode simplified by the CSS light-dark() function | pawelgrzybek.com

We can adjust the look of our sites based on OS theme configuration. Let’s examine how we have been doing that for the past few years and how we can simplify it by using the light-dark() function.

^{pawelgrzybek.com}

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

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

https://gruene.social/@weddige/112190338668045392

#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}

@adactio highlights an interesting gotcha of the new `hanging-punctuation` CSS property, in that it also applies to some form inputs.

https://adactio.com/journal/21027

#typography #css #webdev

Hanging punctuation in CSS

A little fix for Safari.

^adactio.com

Here's a little something: flicker effect!

(if you're a patron on Patreon, you may have seen I've gone down the rabbithole of text effects for the past few months)

No text/ letter duplication whatsoever. No wrapping individual letters in their own elements. Just a single contenteditable element + some SVG filter & CSS gradient & variable magic 🪄✨🎩🐇

Idea from https://nitter.privacytools.io/Mandy_Kerr/status/1772850250950316258

*needs monospaced font to work

#CSS #SVG #filter #svgFilter #textEffect #code #coding #webDev #frontend

(Nitter addon enabled: Twitter links via https://nitter.privacytools.io)

#CSS by @chriscoyier
- Container Queries (Size & Styles)
- Container Units
- :has()
- View Transitions
- Nesting
- Scroll-Driven Animations
- Anchor Positioning
- Scoping
- Cascade Layers
- P3 Colors
- Color Mixing
- Margin Trim
- Text Wrapping
- Subgrid

https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/