TablesNG — Improvements to <table> rendering in Chromium
Tag Archives: css
TablesNG — Improvements to
The CSS Podcast
CSS: inherit, initial, unset, and revert
PPK: Today we’re going to take a quick look at a few special CSS keywords you can use on any CSS property: inherit, initial, revert, and unset. Also, we will ask where and when to use them to the greatest effect, and if we need more of those keywords. Inherit, initial, unset, revert →
Pure HTML + CSS Calculator
Let this blow your mind: a functioning calculator done using only HTML and CSS by Lillian Kodi. Leverages the Checkbox Hack and the Space Toggle Trick. Crazy. As you may notice the option to divide is missing. I guess it was omitted because / is a character that might throw the parser off due to …
Viewport Unit Based Typography vs. Safari
A common thing to do regarding font-sizing is to use Viewport Unit Based Typography, nowadays often combined with CSS min() or clamp(): :root { font-size: min(calc(1em + 1vw), 4em); } However, as Sara Soueidan details, Safari doesn’t co-operate here: In Safari on macOS, the fluid text wasn’t really fluid—resizing the viewport did nothing to the …
Continue reading “Viewport Unit Based Typography vs. Safari”
Engaging Focus Rings
Nice little demo by Adam Argyle in which he makes the focus ring pop by changing its outline-offset (with a transition) on focus. The code also correctly respects the user’s prefers-reduced-motion preference.
CSS Text Morphing
Similar to this 2019 demo by CodePen user Valgo (which uses SVG to create the effect), Amit Sheen created this wonderful CSS-only Word Morphing demo: The key parts to this demo are the filter on the wrapping .morphing element combined with the animated blurring on the .word elements themselves. You need both to get the …
The new responsive: Web design in a component-driven world
In this session from Google I/O 2021, Una Kravets talks about “the new responsive”, short for being responsive to the user, container, and form-factor (text-version available via link below): The web community is entering into a new era of responsive design and shifting our perspectives on what it means. With user preference queries, container queries, …
Continue reading “The new responsive: Web design in a component-driven world”
Dissecting the CSS font shorthand
Mateusz Hadryś dissects the font shorthand The font shorthand allows you to set almost all font-related properties with a single line of CSS. Full Text Styling With a Single Line of CSS →
What’s New In CSS?
At the excellent Web Directions Hover ’21, Adam Argyle opened with a rad presentation covering all what’s new and upcoming for CSS. From risky and may never be in your browser, to stable and just released yesterday; follow Adam as he strolls through proposals, specs and supporting tools for all the this new CSS hotness. …