a thing you absolutely cannot do is nest one interactive control inside another

it has few examples.

Some things to consider in this reset:

• an anonymous layer is used.
• border-box for all
• reset margins and borders
• reset body margins and paddings.
• min body height is 100%
• typography: line-height 1.5; prevent text-size-adjust for mobile
• but headings, button, input and label get a smaller line-height
• prevent media content overflow with max-inline-size: 100%; display: block; block-size: auto
• fill svg with currentColor for svg without fill properties
• inherit fonts in fields
• textarea should resize only vertically
• remove fieldset borders
• text with text-wrap: pretty
• every digit has its own size (use tabular-nums for tables, time, math) with font-variant-numeric: proportional-nums
• overflow-wrap: break-word on texts and heading to avoid inline overflows
• get the numbers on the same baseline with font-variant-numeric: lining-nums;
• hanging punctuation must be set properly
• code clarity is a must, so font-variant-numeric: slashed-zero is useful.
• collapse table borders
• reset sup and sub line-height because they are messing with it in texts
• align opacity with :disabled to 0.8 for all browsers and set the cursor: not-allowed
• add an outline-offset to 0.2rem for :focus-visible

Shadcn makes the radio button overly complex, even if <input type="radio" name="beverage" value="coffee" /> with 30 lines of CSS is enough.
The library uses 3 imports (and 2 components) and 45 lines of code and ARIA.

Text rotating at the borders of an image

HTML and CSS only 😃

ReliCSS is a "CSS hack" detection tool designed to help developers identify and replace outdated browser-specific CSS hacks with modern, standards-compliant alternatives.

Real-time "CSS hack" detection and analysis with instant feedback
Context-aware modern CSS suggestions
Client-side processing - your code never leaves your device

Differences:

• light-dark() requires a color-scheme
• prefer-color-scheme doesn't consider the color-scheme

It's very chromium dependent though

Card content alignment with CSS subgrid

We can compute the amount of red, green and blue with the rgb() function. The same applies to color functions.

hsl() has limitations because the percieved color is not consistent accross hue, saturation and lightness values. That's why oklch comes in: it's a 2020 patch of the 1976 version of lch, that itself improves over hsl.

Also color-mix can be used in different color spaces. Transparency is available when two colors have a sum less than 100%, or mix one color with transparent.

In order to avoid repetition, custom functions is coming to CSS.

While some of what we looked at does require some setup — once it’s in place, we can create very robust systems, and, along with the static world of design software, it does beg the question if more design should be done directly in the browser.

#idea #project create the colors of a design system directly from the browser.

A 3D engine relying on HTML and CSS.

Support is 92%

TL;DR; use a negative GRAD value

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

body {
  --GRAD: 0;
  font-variation-settings: "GRAD" var(--GRAD);
}

@media (prefers-contrast: more) { body { --GRAD: 700 } }
@media (prefers-contrast: less) { body { --GRAD: -50 } }

@media (prefers-color-scheme: dark)                              { body { --GRAD: -50 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { body { --GRAD: 150 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: less) { body { --GRAD: -150 } }

Useful CSS utilities, elements, complete UI blocks and templates.

Carousel are inaccessible and even more with CSS only solutions.

It completely fails with regard to separation of concerns by using CSS for structure, rather than HTML.

The rule of thumb:

HTML is for structure, CSS is for styling, JS is for anything that can’t be achieved with HTML/CSS, and accessibility isn’t omittable.

A free open-source chat platform

Colors:

how do we decide where to use custom properties? There are really two cases:
1) whenever we need to use the same value in more than one place (DRY)
2) when we know a value is going to be changed.

Custom Properties:

I already use the css variables methods. They are great. Note we can inline them and avoid a verbose default: var(--btn-color, var(--color-text))

You can think of :has() as a way to query an element about what’s inside it.

This makes our button class very flexible. You can throw about any combination of things inside it, and it will adjust accordingly. Text only, image and text, image only, inputs (like radio buttons), or multiple images with text.

The post of 37signals takes also the sidebar into account. The trigger button can be pure CSS even if the icon in it changes. :has() allow to verify if a button inside an element is disabled too.

Responsive design:

They use one @media breakpoint (max-width: 100ch) for a two column layout.

Using characters as the unit of measure ensures that we get the right behavior no matter which device you’re using and in a number of other scenarios such as multitasking on iPad or even if you simply enlarge the font size past a certain point. Type is the heart of web pages so it makes sense for the layout to respond to it.

Feature enhancements such as hover or touch effects with media queries: @media (any-hover: hover) in combination with (pointer: fine) or (pointer: coarse)

Great stuff and kudos to them 👏

with currently 90% support, this feature can render or hide the content (without taking space in the layout). Note the auto value can optimize the rendering

In comparison with the display: none trick, developers don't need to specify the layout display: flex | grid | block anymore.