226 private links
A flexbox playground in which code and a nicer UI can be toggled.
A quick win is to use font-variant-emoji: emoji;
Another drop-in css library that authors wished to have to start on every new little website.
Everything that does not have to be JS anymore, and there is a lot !
I didn't know about the accesskey attribute :)
A paper-style imitation library
Now I get it. As often, the container of the node matter.
A guide to primary navigation on the related HTML tags. About HTML, inert
and tabindex
are explained.
For CSS, an optimal focus indicator is explained. There are also :focus-within
and :focus-visible
.
Finally some patterns such as Accordion, Tooltips and skip links are explained.
It looks good.
In order to create tokens (without meaning), the best possible options are:
- $font-14 (px)
- $font-100 (abstract 100s value)
So new tokens can be
- $font-16, $font-36
- $font-150, $font-125, etc..
Names are then important! --level-3
, --spacing
, etc...
- container queries
- style queries (only chromium)
:has
(FF catches up)nth-of
selectortext-wrap: balance
(only chromium): definitely a good oneinitial-letter
(only chromium and safari)- dynamic viewport units (svh, sve, lvh, lvw, dvh, dvw)
- wide gamut color spaces
color-mix
- CSS nesting (FF have to implement it)
- CSS trigonometric functions
- individual transform properties (hey that was supported by FF since v72...)
- popover and selectmenu tags are WIP
and more
A text with a dynamic size depending of the container width:
.container {
container-type: inline-size;
}
.fluid-type {
font-size: clamp(1rem, 4cqi, 3rem);
}
Strategy 2: Grow From a Base Font Size with calc()
font-size: calc(var(--font-size-base) + var(--font-size-fluid, 3cqi));
An upper-bound size can be set with min
if needed.
Strategy 3: Generate Styles Using a Type Scale Ratio
The reason behind Atomic CSS
UnoCSS is an engine instead of a framework because there are no core utilities - all the functionalities are provided via presets or inline configurations.
Transition a CSS grid row from 0
to 1fr
to get an accordion working :D
An Advantage is the text is already rendered for screen readers.
Wow I didn't think about it. It seems practical!
With a list with data-index attributes such as <li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">
and the snippet:
<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
if (!this.value) {
searchStyle.innerHTML = "";
return;
}
// look ma, no indexOf!
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
// beware of css injections!
});
</script>
A simple CSS code to check bot messages on social media (mastodon).
A minimalist CSS library with special work on sidenotes, figures, and epigraphs.
An example of layout top to bottom with different width 👍
A color picker with the oklch format
oklch is based on human perception instead of the RGB for LCH.