Building an accessibility-first CSS/Vue foundation: cascade layers, preference mixins, WCAG 2.2 AA target, tested w/ axe + keyboard/SR passes.
Inspired by @argyleink@Una@bramus & many others. Still WIP, core is live ๐
https://t.co/lwxJi8Dql4
#a11y#css
A historical day for CSS ๐๐
If you write any components used and/or styled by others, you know how huge this is!
background: if(style(--variant: success), var(--green));
Even if you donโt, this will allow things like:
padding: if(var(--2xl), 1em, var(--xl) or var(--m), .5em);
GitHub issue: https://t.co/HZ4zHs33bx
It then follows that finding something important and meaningful in your life is perhaps the most productive use of your time and energy. Because if you donโt find that meaningful something, your fucks will be given to meaningless and frivolous causes.
Once a month, I spend a whole day taking company logos, turning them into pngs, and uploading them to Google for others to use. Here's the background if anybody wants to do the same.
โ๏ธ New Viewport Units
I wrote about the new CSS viewport units: svh, lvh and dvh. The article is packed with a lot of visuals and demos. Happy reading!
๐ https://t.co/dbOuayW5ou
๐ GIVEAWAY ๐
From today until July 7, try to win a lovely Xbox custom controller and an Xbox Anno 1800 Console Edition game!
The rules couldn't be simpler:
RT this post ๐
Give it a try! ๐คฉ
See comment below to find out more about the applicable rules and privacy notice
@chris22smith@alvaro_montoro I wouldnโt use HTML tables for the life of me. Iโd rather use css grid and take advantage of the โorderโ functionality built in.
โ๏ธ New Article: CSS Masking
I wrote about CSS masking: how they work, why to use them, along with a few practical use cases. Happy reading!
๐ https://t.co/A3mYhgtJ40
Really nice, detailed post about CSS anchoring from Roman Komarov ๐๐ผ๐๐ผ๐๐ผ
https://t.co/BESeHNFoNW
Also *love* the typography choices and sidebar comments on this blog ๐
Future CSS Tip! ๐ฎ
Use Anchor Positioning to anchor elements to each other โ๏ธ (No wrappers!)
.anchor { anchor-name: --anc; }
.anchored { top: anchor(--anc bottom); }
Create adaptive layouts with CSS alone ๐ฎ
Let the browser work it out for you! โญ๏ธ
@CodePen link below! ๐