Carousel are still complicated, but better
The lh unit is even more useful [for icon sizes] though because it is relative to the computed line height.
.flow > * + * {
margin-block-start: var(--flow-space, 1em);
}
system-ui
is a good typography because it falls back on the system font (that is readable). It means 0 bandwidth cost.
Exactly.
Law 1: Utility Classes Consume the Design System, They Don’t Create It
Law 2: Utility Classes Cover Only the Low-Hanging Fruit
Law 3: Utility Classes Complement, not Supplant, Semantic CSS
:has
has a lot of possibilities with drag'n'drop. Here the developer uses 3 items: mushrooms, potions and .
For example: dragging some items to make parts of the site grow. https://lynnandtonic.com/assets/images/thoughts/case-study-2022-mushroom-header.mp4
See https://lynnandtonic.com/assets/images/thoughts/case-study-2022-david-rose.mp4 for more real interactions.
A potion adds color: https://lynnandtonic.com/assets/images/thoughts/case-study-2022-home-potions.mp4
Create an accessible <marquee>
tag
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
Using radial gradients to create shapes. They are similar in some ways to svgs.
:root {
overscroll-behavior: none;
}
A codepen demo https://codepen.io/michellebarker/pen/vYbrpbX
CSS has gotten easier to write than it is different to write.
- use
:is
to group multiple selectors such asa:hover
anda:focus
- using logical properties instead of marg
margin-trim
can help by removing the last margin child element of a list for example. It is experimental, so Flexbox with the gap propertyaspect-ratio
to set only one dimension between the height and the width, while keeping proportions.card:has(:hover, :focus)
is easier and straightforward thana.card-link:hover > .card
- an easier way to define color palette with
--gray-dark: color-mix(in srgb, var(--primary-color), #fff 25%);
. It is more maintainable! ch
for managing line lengths;text-wrap: balance
is a work in progress (65% of users can use it)
and more with cascade layers, container queries, <selectmenu>
and CSS nesting