291 private links
For reasons we'll get into later, Tailwind decided to burst on to the scene and become the default styling solution for all modern web development despite taking each and every one of these problems, exacerbating them, and applying them to places that didn't have them before
Good things for Tailwind:
This is a good thing, an unironic win for Tailwind. More than anything else, this is what a large codebase with multiple frontend devs needs: a rigid set of global constants that everyone is strongly incentivized to use.
- Google Web Blog https://web.dev/blog?hl=en
- Rachel Andrew https://bsky.app/profile/rachelandrew.bsky.social
- Jen Simmons https://webkit.org/blog/category/css/
- Firefox nighlty news https://blog.nightly.mozilla.org/
- Microsoft Edge's blog https://blogs.windows.com/msedgedev/
- CSS Tricks https://css-tricks.com/
- Smashing CSS https://www.smashingmagazine.com/category/css/
- Frontend Masters https://frontendmasters.com/blog/
- Piccalilli https://piccalil.li/
- CSS Tips https://css-tip.com/
- Frontend Dogma https://frontenddogma.com/
- Web Platform Features Explorer https://web-platform-dx.github.io/web-features-explorer/
- Web Platform Status Dashboard https://webstatus.dev/
- Chrome Platform Status Dashboard https://chromestatus.com/roadmap
- Polypane (provide a lot of developer tools) https://polypane.app/
- Kevin Powell on YouTube https://www.youtube.com/@KevinPowell and https://html-css-tip-of-the-week.netlify.app/
- CSS Working group (via the mailing list or RSS) https://www.w3.org/groups/wg/css/publications/#WD
- Browser Release notes
- Questions AI
- BCD Watch displays changes to MDN'S browser-compat-data repo
- Can I Use news
The gap is handled differently between these three type of values.
Centered for auto and 1fr, but overflowing for 50%.
Auto overflows for text content.
The behavior is also different for an image: The sturdy 50% column remain in place, and the image overflows it. The auto column grows, but not only to contain the image but a bit wider. The column using fr units grows to contain the image.
Ok but why o_O
Still interesting, but I already have few use cases for container queries. Maybe because I am too dependent of design that uses screen sizes.
This is exactly what I think of a great design system color handling.
The heart is the mapping of semantic CSS colors to modifiers, and thethey can be slapped on every components.
There is always color definitions, then semantic colors such as --color-primary-muted, --color-primary-vivid and then css variables used by the components.
A generator is available as snippet on https://codepen.io/cferdinandi/pen/dPojzmN
All I see so far is this will need more computation or battery drain for this.
The library is available at https://github.com/Specy/liquid-glass
A transition to open or close a modal
Width and height in CSS does not work properly, The parent height takes priority over the child height.
In order for something like height: 50% to work, the parent’s height can’t depend on the child’s height.
A fixed height works just fine. There is one thing to consider though
when we tell
to have height: 50%, that percentage isn’t based on the parent element’s total size, it’s based on the parent’s “content box”. This is the space inside the element, within its border and padding.
It doesn't work with min-height because the size of the element is dynamic.
CSS Grid's children will grow to fill their grid cell as if they have a height: 100%. Another approach is to use flexbox with flex: 1 on the child.
Layouts are mini-languages indeed. See https://shaarli.lyokolux.space/shaare/TPKfkQ
Une vidéo explicative de Grafikart.
(via https://warriordudimanche.net/article2114/6825e02dcfcba)
Only transfer the useful part of a font. It subsets static Unicode-ranges, so only a part of the font will be downloaded.
WebTUI is a CSS library that brings the beauty of Terminal User Interfaces (TUIs) to the browser
Funny!
There is a new lh for "line-height" unit in css.
* + * as known as the howl selector: targets all elements that have the previous same selector.
This selector is great because it has no specificity.
An alternative is *:not(:first-child)
Use appearance: base; on legen style could unlock a lot of styling issues for <legend>