361 private links
A classless CSS framework with a navbar and dark styling for around 10.46 kB.
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.
Tacit is a CSS framework for dummies, who want their web services to look attractive but have almost zero skills in graphic design, just like myself.
Bullframe is a lightweight SCSS framework for building fast, responsive, and accessible UIs.
It works in <svg> tags:
<style>
.bg {
fill: #ffffff;
@media (prefers-color-scheme: dark) {
fill: #000000;
}
}
</style>It's a cheap version for liquid glass with backdrop-filter: blur(10px) brightness(120%); :D
SVG filters are really good for text effects.
The CSS alternative version (because it can be more powerful or maintainable)
That's why Content Security Policies in HTTP are still useful for CSS
ul.notes li {
list-style-type: "Note: ";
list-style-position: inside;
}The ::marker pseudo-selector can be used to customize the rest. Generating content for markers is supported by Chromium and Firefox, but not by WebKit.
A list of symbols can be used with symbols(). The browser support is not great though. @counter-style can be used instead. It's Baseline Newly Available since 2023.
There is also the old ::before trick to set custom contents.
As summary:
| CSS | Use Case |
|---|---|
| list-style | Changing the basic bullet styles or numbering system. Using a Unicode symbol, emoji or text in place of a bullet. Using images for bullets. |
| li::marker | Colouring the numbering or bullets differently to the list text. Changing the font- properties of the numbering (but not its size unless the difference is subtle). |
| symbols() | Only supported by Firefox, use @counter-style instead. |
| @counter-style | For defining your own sequence of bullet symbols (not images) or a completely customised numbering system. |
| extends | Used within @counter-style to modify existing numbering systems, for example to change or remove the default ”.” suffix. |
| li::before | For complete control over marker positioning, especially if your bullets or numbering are much larger than the list text. |
The reset:
legend {
padding: 0;
display: table;
}
fieldset {
border: 0;
padding: 0.01em 0 0 0;
margin: 0;
min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
display: table-cell;
}Des définitions avec des exemples de locales.
i18n: The design and development of a product that is enabled for target audiences that vary in culture, region, or language.
i10n: The tailoring of a system to the individual cultural expectations of a specific target market or group of individuals.
Locale: an identifier for a set of international preferences
international
Ainsi que les RFCs les définissant, avec notamment l'exemple de l'en-tête HTTP "Content-Language", "Accept-Language".
Les locales sont aussi utilisées via l'attribut lang, la spécificité de translate, dir, hreflang en HTML; et les possiblités d'usages en CSS via les sélecteurs
Mots-clés lié à display: flex
- auto : L'ancien roi. Contextuel, imprévisible parfois, il laisse le navigateur calculer la taille selon le modèle de boîte standard (display).
- min-content : "Je veux être aussi petit que possible." Le navigateur va essayer de réduire la boîte jusqu'à ce que le mot le plus long ou l'élément le plus large force la largeur minimale. C'est le "soft wrapping" ultime.
- max-content : "Je prends toute la place dont j'ai besoin." La boîte s'élargit pour contenir tout le texte sans aucun retour à la ligne, quitte à provoquer un scroll horizontal (à utiliser avec prudence !).
- fit-content : Le compromis parfait. C'est mathématiquement équivalent à min(max-content, available-space). La boîte s'adapte au contenu, mais s'arrête poliment si elle touche le bord du conteneur parent.
- stretch : L'élément s'étire pour remplir l'axe disponible. C'est souvent le comportement par défaut des flex-items ou des grid-items.
Math functions such as clamp(), min(), max().
Le pattern Repeat Auto Minmax (RAM) est usuellement donné aux snippets qui génère une grille responsive sans aucun breakpoint grid-template-columns: minmax(300px, 1fr)
The breakpoint is used for mobile, but appears inconvenient for tablet or half-screen windows.
Solutions:
- having more breakpoints in between
- design with container queries in mind
- make the design dynamic at its core, meaning that it can change based on the number of items
- leverage well supported features like Grid and Flex
appearance: base-select, so it's too early yet.
It can be useful for later. It seems broken on Firefox though.
A dialog transition. It can be definitely useful instead of heavy implementations. Here is a lightweight implementation without JS.