A guide to display: grid-lanes

I learned the content property has an alt (similar to images) if needed.

The snippet:

[href^="http"]:not(.btn, :has(svg)):not([href^="https://gomakethings.com"], [href^="http://localhost"])::after {
background-color: currentColor;
    content: "" / "(external link)";
    display: inline-block;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg>');
    mask-size: cover;
}

There is an @page to set the property of a page. There is also rules to break the page at desired.

The navigation can be hidden.
Links and <abbr> content must be placed in the view with content: attr(href).
Check the forms.

It can be worth checking for a black and white version while printing it.

safe-area-insert is useful to provide some padding to avoid cameras and virtual buttons. This is not needed because the browser handles it for you already.

It's still needed for elements with position: absolute or position: fixed

Browsers by default will prevent your site from being obscured by the notch or home indicator, so your content will be safe without any special handling.

Ideally we want the content to stretch edge-to-edge, but we want to make sure they're not obscured by system UI. To get that, you need to opt in to the full viewport and handle safe areas yourself.

Maybe useful for later, but I see some advantages.

wcag2(aa) seems to be a good and self explanatory function.

It has limitations though:

• it doesn't guarantee perceptual or AAA compliance
• transition snaps because contrast-color returns a discrete value and
• tie goes to white
• gradients and images are out
• transparent colors are composited first
• windows high contrast mode takes over. It is defined in https://www.w3.org/TR/css-color-adjust-1/#forced-colors-mode

The generated colors can be combined with other color functions.

I am still concerned more and more computation will be put on simple webpages.

You might think that the JS version is slower [than CSS, but it's not for the right reason]

But there’s one significant difference: the JavaScript version runs on the main thread, along with everything else happening in our application. CSS transitions and keyframe animations run on a separate thread, so they aren’t disrupted when stuff happens in JavaScript.

Motion can create more smooth APIs but GSAP is more powerful.

With 3 columns and CSS grid.

We can use the oklch (OK L C H) and adjust the lightness and chroma from the hue, thus generating colors.

Creating colors from oklch is tedious, but they can derivated from other color codes from [#007ab8](https://shaarli.lyokolux.space/./add-tag/007ab8) calc(l - 0.05) c h)

Tip: very light and very dark lightness levels have a tendency to look oversaturated.. a lot of color palettes look more cohesive when you reduce the chroma slightly as you move away from the middle-range of lightness towards the edges.

Example: https://codepen.io/cferdinandi/pen/zxoYpeL

This example is good for dynamic colors.

Following the basics of anchor positioning, there are many more use cases for this layout specification. Note this is not supported by browsers yet.

Logical properties can be used for the alignment.

position-try-fallbacks can be defined by the developer with @position-try. It accepts few rules: inset properties, margins, sizing, self-alignment, position-anchor, position-area.

body:has(li:hover) li:not(:hover){
    opacity:0.5;
    transition: opacity 500ms;
}

Highlight the hovered element of a list by hiding the others

A quizz with 20 questions

This tool calculates font metrics for an uploaded font. The values it outputs, such as aspect ratio, can be used with the CSS font-size-adjust property. For more details see MDN.

Demo https://devcss.devins.page/

Some CSS variables are computed in JS, and the rest is made by CSS and the browser. Each item is a <div>:

<div class="wall" style="
  --start-x: 2560;
  --start-y: -2112;
  --end-x: 2560;
  --end-y: -2496;
  --floor-z: 32;
  --ceiling-z: 88;
">

All the geometry calculation is made in the browser.

JavaScript passes raw DOOM data in. CSS does the trigonometry.
JavaScript runs the game loop. CSS does the rendering.

As the time of writing, the browser support is 66%

A classless CSS framework with a navbar and dark styling for around 10.46 kB.

Demo: https://hakanalpay.com/bahunya/demo.html

Classless.css is one small CSS file, which defines few but great styles for basic HTML5 tags plus very few classes for grid, cards and spacing. Nothing more. Nothing less.