226 private links
How to make this better with little css.
Inherit font-size, line-height, word-spacing, border and padding.
There are also
In order to migrate code bases efficiently to the css logical properties, one should use a migration tool.
There is already a way to parse CSS with https://github.com/servo/rust-cssparser.
What we need is simply to replace some of its value :)
There is also a simple find-and-replace example with a gist: https://gist.github.com/cchaos/acfd24d603acd5f176766ab86b5dd1d5.
Depending on the vessel (ship):
Stern (back), port (left), bow (forward), starboard (right). These directions are based on the vessel "cap".
Depending on the skiers:
"skier's Left" is based on a skier facing down the mountain.
Depending on the reader:
- inline is how a sentence is read
- block is the perpendicular of inline
- start is where the flow... starts
- end is where the flow ... ends
I find it still hard to explain and I got it with examples. Read more on mdn
block/inline and start/end can be mixed up to target a specific location. From our Latin reader perspective, it applies as follows: https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/03/block-dir.png?w=720&ssl=1
It's user-centric because its language direction is respective. [...] We can embrace diversity, complexity, and unpredictability and rely on the browser engines to properly lay it out.
Why all of these? Because right, left, top, and bottom can be interpreted differently between the explainer's and the public points of view.
A clear starting point on logical properties!
I keep:
- Container query: indeed
- Scroll snap
- Grid Pile: centering everything in one cell with
display: grid; place-content: center;
and in all direct children:grid-area: 1/1
- Quick circles with
inline-size: 25ch; aspect-ratio: 1; border-radius: 50%;
- Logical properties :D
They are better because:
- Hum they are logical
- They are ready for language translation
So why?
- People needs to know about them
- Legacy projects that needs both syntax or a complete rewrite
- Conflicts: if a non-logical and a logical property currently affect the same thing, it’s a specificity (including source order) game.
- The rollout doesn't feel totally done: linear gradients with to left and to bottom, translate, etc...
A good starter to use cases for the :has()
selector
A great example!
Some dark/light mode toggles
How to handle spacing between css elements in one line of code?
.flow > * + * {
margin-block-start: var(--flow-space, 1em);
}
Ready to use design tokens
- 140 named colors
- RGB (the traditional notation)
- Note we can replace
rgba(255, 0, 0, 0.5)
withrgb(255 0 0 / 0.5)
- Note we can replace
- Hex codes (the de-facto used unit)
- HSL (the human-readable format):
- hue: the pigment used (deg)
- saturation: how much pigment (%)
- lightness: how light? (%)
- display p3: only supported in Safari and Chrome but allow more colors than sRGB
- LCH: a more human-friendly representation than HSL. It is only supported in recent versions of Chrome and Safari though.
oklch
fixes some bugs of lch.
How to get right proportions for a rounded corner inside of a rounded container?
outerRadius - gap = innerRadius
Better than writing you own utility classes because this tool will generate only the one needed :)
Another great tools initiated by Antfu
UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.
@media (prefers-color-scheme: dark) {
html body {filter: invert(1);}
/* the following really should be managed by a cascade layer */
.some-container-items-or-images {
box-shadow: 0.25em 0.25em 0.67em #FFF8;
}
}
From Lary Hudson
you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well.
- Confetti canon
- Bookmark Button: transitions between SVGs. The MorphSVG plugin comes in to allow different amount of points. It does the heavy lifting so you can smoothly transition between any SVG Shapes.