291 private links
To prevent a custom behavior on Safari Mobile
Rather than helping you build a sitewide design, readable.css provides a base default that is both sensible and beautiful.
For MacOS only
-webkit-font-smoothing: antialiased;
A great CSS reset
It's not available in Firefox yet.
- Link and button states
- color modes
- variables
- any kind of state
- viewport sizes
- anything scrolling or mouse movement related
- variable content
- units & math
- animations & transitions
- device specific details (touch screens, low-bandwidth situations)
- media handling
hsl & rgb had an update:
- hsla is replaced by hsl
- units are now optional when we’re using the space separated syntax
Relative colours
They can be created by mixing colors: rgb( from [#ff0000](https://shaarli.lyokolux.space/./add-tag/ff0000) r g b / 0.5) tells the browser to create an rgb color, from#ff0000 where each hexadecimal is assigned to the variables r, g, b with 50% transparency. Note h s l can be used as notation.
So here is how to plug transparency to a color: rgb(from var(--color-primary) h s l / 0.75);.
Quickwins:
- add transparency
- use lighter and darker versions of a base color in hsl:
--base-light: hsl(from var(--base) h s 75%);. See a one color toast notification: https://codepen.io/piccalilli/pen/XJXMgEB/64c4f56702893dc64d9cd4dc564f5e0e - using
calc(a later post)
Light and dark mode handling
light-dark() allow to define two variants of the color for the dark and light theme, if color-scheme: light dark; is activated. color-scheme can also deactivate it.
Colour spaces
They can be defined, so the browser does a good job of filling in those in-between colours, and sometimes, it falls flat a little. The trick was to add one or two colors in-between. Using the oklch as colour space is better though. The color spaces have to be tried manually though: lch and oklch, lab and oklab, hwb, xyz.
To have rainbow, one can use longer hue as for example linear-gradient(in hsl longer hue 90deg, var(--color-1), var(--color-2));. increasing or decreasing exists too.
As a quick aside, the range of colours in a given space is called its (wide or narrow) gamut.
display-p3 is one reference of a colour space. The chrome color picker also show the limitations of sRGB in display-p3 :)
CSS styling has no perfect solutions but tradeoffs between the different approaches. Choose the one that fits best to the project
Usages:
- Circular menus or item lists
- Wavy layouts (DNA strands, wave)
Fancy animations
A Hz unit in CSS ?
Use them as much as possible.
Exceptions are physical placement (anchor, ...)
Another CSS reset
Drunk theme
With box-shadow and a reset for outline.
If I want to develop fluid type calculations that adapt to local context, I’ll use em and cqi (container inline size) values. If I want my calculations to remain consistent across the entire page, I’ll use rem and vi (viewport inline size) calculations. In either case, I’ll define those values on body or other elements – so that 1rem always refers to the result of our initial negotiation, and doesn’t take on more complex meaning.
For spacing on the y-axis, the line-height (lh) unit is great or the rlh (root line-height). The x-axis can be handled with the vi or cqi units.
The right units for any situation are the ones that express most clearly what we mean – and sometimes what we mean requires a combination of units.
There’s no best unit, no best layout mode, and no best selector. When we use the entire language, we have more tools for clearly expressing our goals.
A great summary
After 25 years, the zoom property will get a spec.
Zoom affects the box model compared to tranform: scale()
To show scrollbars only when they’re needed (while keeping space for the scrollbar if it’s added later) use the scrollbar-gutter CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
Note it's baseline 2024, so it's useful to hide it behind the @supports media query.
Piccalilli shares links!