297 private links
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.
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.
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine
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.
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