Gists
On gists
Popular ⭐
Tailwind CSS
Tailwind advanced
index.html #
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS - Advanced Triky</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-50">
<h1 class="text-3xl font-bold mb-8">Tailwind CSS - Advanced Triky 🚀</h1>
<!-- ============================================ -->
<!-- #2 PEER SELEKTORY -->
<!-- ============================================ -->
<section class="mb-12 bg-white p-6 rounded-lg border-2 border-blue-200">
<h2 class="text-2xl font-bold mb-4 text-blue-700">#2 Peer selektory</h2>
<p class="text-gray-600 mb-4">Sourozenec ovlivňuje sourozence</p>
<div class="bg-gray-50 p-4 rounded mb-4">
<code class="text-sm">peer + peer-checked:class</code>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Checkbox ovládá label</h3>
<div class="flex items-center gap-3">
<input type="checkbox" id="check1" class="peer w-5 h-5" />
<label for="check1" class="peer-checked:text-blue-600 peer-checked:font-bold cursor-pointer">
Zaškrtni checkbox → label se změní
</label>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Named peers (více peer prvků)</h3>
<div class="space-y-3">
<div>
<input type="radio" name="opt" id="opt1" class="peer/opt1 hidden" />
<label for="opt1" class="block p-3 border-2 border-gray-300 rounded cursor-pointer peer-checked/opt1:border-green-500 peer-checked/opt1:bg-green-50">
Varianta 1
</label>
<div class="hidden peer-checked/opt1:block mt-2 p-3 bg-green-100 rounded">
✅ Obsah pro variantu 1
</div>
</div>
<div>
<input type="radio" name="opt" id="opt2" class="peer/opt2 hidden" />
<label for="opt2" class="block p-3 border-2 border-gray-300 rounded cursor-pointer peer-checked/opt2:border-purple-500 peer-checked/opt2:bg-purple-50">
Varianta 2
</label>
<div class="hidden peer-checked/opt2:block mt-2 p-3 bg-purple-100 rounded">
✅ Obsah pro variantu 2
</div>
</div>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- #4 MULTIPLE CONDITIONS -->
<!-- ============================================ -->
<section class="mb-12 bg-white p-6 rounded-lg border-2 border-green-200">
<h2 class="text-2xl font-bold mb-4 text-green-700">#4 Multiple conditions (AND)</h2>
<p class="text-gray-600 mb-4">Několik podmínek musí platit zároveň</p>
<div class="bg-gray-50 p-4 rounded mb-4">
<code class="text-sm">data-[active]:data-[type=premium]:bg-gold</code>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Obě podmínky musí platit</h3>
<div data-active data-type="premium" class="p-4 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500 data-[active]:data-[type=premium]:font-bold">
✅ data-active + data-type="premium" → žluté pozadí
</div>
<div data-active class="p-4 mt-2 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500">
❌ Jen data-active (chybí premium) → normální
</div>
<div data-type="premium" class="p-4 mt-2 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500">
❌ Jen data-type="premium" (chybí active) → normální
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Kombinace s hover a data atributem</h3>
<button data-variant="danger" class="p-3 bg-red-500 text-white rounded hover:data-[variant=danger]:bg-red-700 hover:data-[variant=danger]:scale-105 transition">
Hover + data-variant="danger" → tmavší a větší
</button>
</div>
</section>
<!-- ============================================ -->
<!-- #5 NTH-CHILD SELEKTORY -->
<!-- ============================================ -->
<section class="mb-12 bg-white p-6 rounded-lg border-2 border-purple-200">
<h2 class="text-2xl font-bold mb-4 text-purple-700">#5 Nth-child selektory</h2>
<p class="text-gray-600 mb-4">Stylování podle pozice v DOM</p>
<div class="bg-gray-50 p-4 rounded mb-4">
<code class="text-sm">[&>*:nth-child(odd)]:bg-gray-100</code>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Liché/sudé řádky (zebra pattern)</h3>
<div class="[&>*:nth-child(odd)]:bg-gray-100 [&>*:nth-child(even)]:bg-white border-2 border-gray-300 rounded overflow-hidden">
<div class="p-3">Řádek 1 (lichý) - šedé pozadí</div>
<div class="p-3">Řádek 2 (sudý) - bílé pozadí</div>
<div class="p-3">Řádek 3 (lichý) - šedé pozadí</div>
<div class="p-3">Řádek 4 (sudý) - bílé pozadí</div>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">První a poslední prvek</h3>
<div class="[&>*:first-child]:font-bold [&>*:first-child]:text-green-600 [&>*:last-child]:font-bold [&>*:last-child]:text-red-600 space-y-2">
<div class="p-3 border rounded">První prvek - zelený tučný</div>
<div class="p-3 border rounded">Prostřední prvek - normální</div>
<div class="p-3 border rounded">Poslední prvek - červený tučný</div>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Každý třetí prvek</h3>
<div class="[&>*:nth-child(3n)]:bg-blue-100 [&>*:nth-child(3n)]:border-blue-500 space-y-2">
<div class="p-2 border-2 rounded">Prvek 1</div>
<div class="p-2 border-2 rounded">Prvek 2</div>
<div class="p-2 border-2 rounded">Prvek 3 - modrý (3n)</div>
<div class="p-2 border-2 rounded">Prvek 4</div>
<div class="p-2 border-2 rounded">Prvek 5</div>
<div class="p-2 border-2 rounded">Prvek 6 - modrý (3n)</div>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Not last-child (margin mezi prvky)</h3>
<div class="[&>*:not(:last-child)]:mb-4">
<div class="p-3 bg-gray-100 rounded">Prvek s marginem dole</div>
<div class="p-3 bg-gray-100 rounded">Prvek s marginem dole</div>
<div class="p-3 bg-gray-100 rounded">Poslední prvek BEZ marginu</div>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- #6 BEFORE/AFTER -->
<!-- ============================================ -->
<section class="mb-12 bg-white p-6 rounded-lg border-2 border-orange-200">
<h2 class="text-2xl font-bold mb-4 text-orange-700">#6 Before/After pseudo-elementy</h2>
<p class="text-gray-600 mb-4">Přidání obsahu bez HTML</p>
<div class="bg-gray-50 p-4 rounded mb-4">
<code class="text-sm">before:content-['→'] after:content-['✓']</code>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Ikony před/za textem</h3>
<div class="before:content-['→'] before:mr-2 before:text-blue-500 p-3 border rounded">
Text se šipkou před
</div>
<div class="after:content-['✓'] after:ml-2 after:text-green-500 p-3 border rounded mt-2">
Text se zaškrtávátkem za
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Dekorativní čára</h3>
<h2 class="text-xl font-bold before:content-[''] before:inline-block before:w-12 before:h-1 before:bg-purple-500 before:mr-3 before:align-middle">
Nadpis s čárou
</h2>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Badge/štítek</h3>
<div class="relative inline-block">
<button class="px-4 py-2 bg-blue-500 text-white rounded after:content-['3'] after:absolute after:-top-2 after:-right-2 after:bg-red-500 after:text-white after:rounded-full after:w-6 after:h-6 after:flex after:items-center after:justify-center after:text-xs after:font-bold">
Notifikace
</button>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Citace s úvozovkami</h3>
<blockquote class="before:content-['"'] after:content-['"'] before:text-4xl after:text-4xl before:text-gray-400 after:text-gray-400 p-4 bg-gray-50 rounded italic">
<span class="text-lg">Toto je citace s automatickými úvozovkami</span>
</blockquote>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Tooltip (hover efekt)</h3>
<span class="relative inline-block cursor-help underline decoration-dotted hover:after:content-['Tohle_je_tooltip'] hover:after:absolute hover:after:left-1/2 hover:after:-translate-x-1/2 hover:after:top-full hover:after:mt-2 hover:after:bg-gray-800 hover:after:text-white hover:after:px-3 hover:after:py-1 hover:after:rounded hover:after:text-sm hover:after:whitespace-nowrap">
Najeď myší
</span>
</div>
</section>
<!-- ============================================ -->
<!-- #7 SUPPORTS QUERIES -->
<!-- ============================================ -->
<section class="mb-12 bg-white p-6 rounded-lg border-2 border-pink-200">
<h2 class="text-2xl font-bold mb-4 text-pink-700">#7 Supports queries (detekce CSS features)</h2>
<p class="text-gray-600 mb-4">Aplikuj styly jen když prohlížeč podporuje feature</p>
<div class="bg-gray-50 p-4 rounded mb-4">
<code class="text-sm">supports-[backdrop-filter]:backdrop-blur-lg</code>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Backdrop blur (fallback)</h3>
<div class="relative h-40 bg-gradient-to-r from-blue-400 to-purple-500 rounded overflow-hidden">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400" class="w-full h-full object-cover" alt="pozadí" />
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white/30 supports-[backdrop-filter]:backdrop-blur-md supports-[backdrop-filter]:bg-white/20 p-6 rounded-lg">
<p class="font-bold text-white">
S podporou: blur efekt<br/>
Bez podpory: silnější opacity
</p>
</div>
</div>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Grid layout (fallback na flex)</h3>
<div class="flex flex-wrap gap-4 supports-[display:grid]:grid supports-[display:grid]:grid-cols-3">
<div class="p-4 bg-blue-100 rounded">Box 1</div>
<div class="p-4 bg-blue-100 rounded">Box 2</div>
<div class="p-4 bg-blue-100 rounded">Box 3</div>
</div>
<p class="text-sm text-gray-600 mt-2">S podporou Grid: 3 sloupce | Bez: flex wrap</p>
</div>
</section>
<!-- ============================================ -->
<!-- #10 ARBITRARY PROPERTIES -->
<!-- ============================================ -->
<section class="mb-12 bg-white p-6 rounded-lg border-2 border-indigo-200">
<h2 class="text-2xl font-bold mb-4 text-indigo-700">#10 Arbitrary properties (vlastní CSS)</h2>
<p class="text-gray-600 mb-4">Použij libovolnou CSS property</p>
<div class="bg-gray-50 p-4 rounded mb-4">
<code class="text-sm">[property:value]</code>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Mask image (gradient fade)</h3>
<div class="[mask-image:linear-gradient(to_bottom,black_50%,transparent)] bg-gradient-to-r from-purple-400 to-pink-400 h-32 flex items-center justify-center text-white font-bold">
Fade efekt dole
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Text stroke</h3>
<h2 class="text-5xl font-bold text-transparent [-webkit-text-stroke:2px_black]">
OUTLINED TEXT
</h2>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Custom scrollbar</h3>
<div class="h-32 overflow-y-scroll border-2 border-gray-300 rounded p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-blue-500 [&::-webkit-scrollbar-thumb]:rounded">
<p>Scrolluj dolů a uvidíš vlastní scrollbar.</p>
<p class="mt-4">Lorem ipsum dolor sit amet.</p>
<p class="mt-4">Lorem ipsum dolor sit amet.</p>
<p class="mt-4">Lorem ipsum dolor sit amet.</p>
<p class="mt-4">Lorem ipsum dolor sit amet.</p>
<p class="mt-4">Konec obsahu.</p>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Aspect ratio nestandardní</h3>
<div class="[aspect-ratio:21/9] bg-gradient-to-r from-orange-400 to-red-400 rounded flex items-center justify-center text-white font-bold">
21:9 Ultrawide poměr
</div>
</div>
</section>
<!-- ============================================ -->
<!-- #13 ARBITRARY VARIANTS S MODIFIERS -->
<!-- ============================================ -->
<section class="mb-12 bg-white p-6 rounded-lg border-2 border-teal-200">
<h2 class="text-2xl font-bold mb-4 text-teal-700">#13 Arbitrary variants s media queries</h2>
<p class="text-gray-600 mb-4">Vlastní podmínky a media queries</p>
<div class="bg-gray-50 p-4 rounded mb-4">
<code class="text-sm">[@media(hover:hover)]:hover:scale-110</code>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Hover jen na zařízeních s hover (ne mobil)</h3>
<button class="px-6 py-3 bg-blue-500 text-white rounded transition [@media(hover:hover)]:hover:scale-110 [@media(hover:hover)]:hover:bg-blue-600">
Hover efekt jen na PC/notebooku
</button>
<p class="text-sm text-gray-600 mt-2">Na mobilu (touch) se škálování neaplikuje</p>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Dark mode s prefers-color-scheme</h3>
<div class="p-4 border-2 rounded bg-white [@media(prefers-color-scheme:dark)]:bg-gray-800 [@media(prefers-color-scheme:dark)]:text-white [@media(prefers-color-scheme:dark)]:border-gray-600">
Tento box reaguje na systémové nastavení dark mode
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Orientace zařízení</h3>
<div class="p-4 border-2 rounded bg-blue-100 [@media(orientation:portrait)]:bg-green-100 [@media(orientation:landscape)]:bg-orange-100">
<p class="font-semibold">Otoč zařízení:</p>
<p class="text-sm">Portrait (na výšku) = zelená</p>
<p class="text-sm">Landscape (na šířku) = oranžová</p>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Vlastní breakpoint</h3>
<div class="p-4 border-2 rounded bg-gray-100 [@media(min-width:800px)]:bg-purple-100 [@media(min-width:800px)]:text-purple-800">
Pod 800px: šedá | Nad 800px: fialová
</div>
</div>
</section>
<!-- ============================================ -->
<!-- SHRNUTÍ -->
<!-- ============================================ -->
<section class="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg border-2 border-blue-300">
<h2 class="text-2xl font-bold mb-6">📚 Rychlé shrnutí</h2>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-white p-4 rounded">
<h3 class="font-bold text-blue-600 mb-2">#2 Peer</h3>
<code class="text-xs">peer-checked:text-blue-500</code>
<p class="text-sm text-gray-600 mt-1">Sourozenec ovlivňuje sourozence</p>
</div>
<div class="bg-white p-4 rounded">
<h3 class="font-bold text-green-600 mb-2">#4 Multiple conditions</h3>
<code class="text-xs">data-[a]:data-[b]:class</code>
<p class="text-sm text-gray-600 mt-1">Obě podmínky musí platit (AND)</p>
</div>
<div class="bg-white p-4 rounded">
<h3 class="font-bold text-purple-600 mb-2">#5 Nth-child</h3>
<code class="text-xs">[&>*:nth-child(odd)]:bg-gray</code>
<p class="text-sm text-gray-600 mt-1">Stylování podle pozice</p>
</div>
<div class="bg-white p-4 rounded">
<h3 class="font-bold text-orange-600 mb-2">#6 Before/After</h3>
<code class="text-xs">before:content-['→']</code>
<p class="text-sm text-gray-600 mt-1">Pseudo-elementy s obsahem</p>
</div>
<div class="bg-white p-4 rounded">
<h3 class="font-bold text-pink-600 mb-2">#7 Supports</h3>
<code class="text-xs">supports-[backdrop-filter]:blur</code>
<p class="text-sm text-gray-600 mt-1">Feature detection + fallback</p>
</div>
<div class="bg-white p-4 rounded">
<h3 class="font-bold text-indigo-600 mb-2">#10 Arbitrary properties</h3>
<code class="text-xs">[mask-image:gradient]</code>
<p class="text-sm text-gray-600 mt-1">Libovolné CSS properties</p>
</div>
<div class="bg-white p-4 rounded">
<h3 class="font-bold text-teal-600 mb-2">#13 Arbitrary variants</h3>
<code class="text-xs">[@media(hover:hover)]:hover</code>
<p class="text-sm text-gray-600 mt-1">Vlastní media queries</p>
</div>
</div>
</section>
</body>
</html>
On gists
Popular ⭐
Tailwind CSS
Tailwind super selectors (&, data-*, group ...)
index.html #
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Selektory - Kompletní průvodce</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
<h1 class="mb-8 text-3xl font-bold">Tailwind CSS - Kompletní průvodce selektory</h1>
<!-- ============================================ -->
<!-- ČÁST 1: STYLOVÁNÍ SAMOTNÉHO ELEMENTU -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-blue-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-blue-700">ČÁST 1: Stylování samotného elementu</h2>
<!-- #1 Data atribut bez hodnoty -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#1 Data atribut BEZ hodnoty na elementu</h3>
<div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-[active]:class</code> nebo <code class="text-sm">data-active:class</code></div>
<div data-active class="border-2 border-gray-300 p-4 data-[active]:border-purple-500 data-[active]:bg-purple-50">✅ Mám data-active → fialový</div>
<div class="mt-2 border-2 border-gray-300 p-4 data-[active]:border-purple-500 data-[active]:bg-purple-50">❌ Nemám data-active → šedý</div>
</div>
<!-- #2 Data atribut S hodnotou -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#2 Data atribut S konkrétní hodnotou na elementu</h3>
<div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-[state=open]:class</code> - kontroluje přesnou hodnotu</div>
<div data-state="open" class="border-2 border-gray-300 p-4 data-[state=open]:border-green-500 data-[state=open]:bg-green-50">✅ data-state="open" → zelený</div>
<div data-state="closed" class="mt-2 border-2 border-gray-300 p-4 data-[state=open]:border-green-500 data-[state=open]:bg-green-50">❌ data-state="closed" → šedý</div>
</div>
<!-- #3 Data atribut - jen přítomnost -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#3 Data atribut - kontrola jen PŘÍTOMNOSTI (ignoruje hodnotu)</h3>
<div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-state:class</code> - stačí, že atribut existuje</div>
<div data-state="open" class="border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">✅ data-state="open" → oranžový</div>
<div data-state="closed" class="mt-2 border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">✅ data-state="closed" → také oranžový (hodnota se ignoruje)</div>
<div class="mt-2 border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">❌ bez data-state → šedý</div>
</div>
<!-- #4 CSS třída -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#4 CSS třída na elementu</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&.active]:class</code>
</div>
<div class="active border-2 border-gray-300 p-4 [&.active]:border-blue-500 [&.active]:bg-blue-50">✅ Mám třídu .active → modrý</div>
<div class="mt-2 border-2 border-gray-300 p-4 [&.active]:border-blue-500 [&.active]:bg-blue-50">❌ Nemám třídu .active → šedý</div>
</div>
</section>
<!-- ============================================ -->
<!-- ČÁST 2: STYLOVÁNÍ PODLE RODIČE (GROUP) -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-green-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-green-700">ČÁST 2: Stylování podle rodiče s GROUP (čistší syntaxe)</h2>
<p class="mb-6 text-gray-600">Rodič musí mít třídu <code class="rounded bg-gray-100 px-2 py-1">group</code></p>
<!-- #5 Group + data atribut bez hodnoty -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#5 Group + data atribut BEZ hodnoty</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">group-data-[active]:class</code>
</div>
<div data-active class="group border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[active]:font-bold group-data-[active]:text-purple-600">✅ Rodič (group) má data-active → fialový text</p>
</div>
<div class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[active]:font-bold group-data-[active]:text-purple-600">❌ Rodič nemá data-active → normální</p>
</div>
</div>
<!-- #6 Group + data atribut s hodnotou -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#6 Group + data atribut S hodnotou</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">group-data-[state=danger]:class</code>
</div>
<div data-state="danger" class="group border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[state=danger]:font-bold group-data-[state=danger]:text-red-600">✅ Rodič má data-state="danger" → červený</p>
</div>
<div data-state="success" class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[state=danger]:font-bold group-data-[state=danger]:text-red-600">❌ Rodič má data-state="success" → normální</p>
</div>
</div>
<!-- #7 Group + CSS třída -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#7 Group + CSS třída</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">group-[.card--danger]:class</code>
</div>
<div class="group card--danger border-2 border-gray-300 bg-orange-600 p-4">
<a href="#" class="text-black group-[.card--danger]:font-bold group-[.card--danger]:text-white"> ✅ Rodič má .card--danger → bílý text </a>
</div>
<div class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<a href="#" class="text-black group-[.card--danger]:font-bold group-[.card--danger]:text-white"> ❌ Rodič nemá .card--danger → černý text </a>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- ČÁST 3: STYLOVÁNÍ PODLE PŘEDKA (ARBITRARY) -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-purple-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-purple-700">ČÁST 3: Stylování podle předka bez GROUP (flexibilnější)</h2>
<p class="mb-6 text-gray-600">Rodič/předek <strong>nemusí</strong> mít třídu <code class="rounded bg-gray-100 px-2 py-1">group</code></p>
<!-- #8 Arbitrary + data atribut bez hodnoty -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#8 Arbitrary selektor + data atribut BEZ hodnoty</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[[data-expanded]_&]:class</code>
</div>
<div data-expanded class="border-2 border-gray-300 bg-gray-100 p-4">
<p class="[[data-expanded]_&]:font-bold [[data-expanded]_&]:text-purple-600">✅ Předek má data-expanded → fialový</p>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="[[data-expanded]_&]:font-bold [[data-expanded]_&]:text-purple-600">❌ Předek nemá data-expanded → normální</p>
</div>
</div>
<!-- #9 Arbitrary + data atribut s hodnotou -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#9 Arbitrary selektor + data atribut S hodnotou</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[[data-theme='dark']_&]:class</code>
</div>
<div data-theme="dark" class="border-2 border-gray-300 bg-gray-800 p-4">
<p class="text-gray-400 [[data-theme='dark']_&]:font-bold [[data-theme='dark']_&]:text-orange-400">✅ Předek má data-theme="dark" → oranžový</p>
</div>
<div data-theme="light" class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="text-gray-400 [[data-theme='dark']_&]:font-bold [[data-theme='dark']_&]:text-orange-400">❌ Předek má data-theme="light" → šedý</p>
</div>
</div>
<!-- #10 Arbitrary + CSS třída -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#10 Arbitrary selektor + CSS třída</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[.is-open_&]:class</code>
</div>
<div class="is-open border-2 border-gray-300 bg-gray-100 p-4">
<p class="[.is-open_&]:font-bold [.is-open_&]:text-blue-600">✅ Předek má .is-open → modrý</p>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="[.is-open_&]:font-bold [.is-open_&]:text-blue-600">❌ Předek nemá .is-open → normální</p>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- ČÁST 4: STYLOVÁNÍ POTOMKA PODLE RODIČE -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-orange-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-orange-700">ČÁST 4: Stylování POTOMKA podle stavu RODIČE</h2>
<p class="mb-6 text-gray-600">Rodič má atribut/třídu a stylujeme jeho potomka (dítě, vnuka...)</p>
<!-- #11 Potomek podle data atributu rodiče -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#11 Stylování SVG podle data atributu rodiče</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&[data-collapsed=true]_svg]:rotate-180</code>
<p class="mt-1 text-xs text-gray-600">Čteš to: "Když <strong>tento element</strong> má data-collapsed=true, otoč jeho <strong>svg potomka</strong>"</p>
</div>
<div data-collapsed="true" class="border-2 border-gray-300 bg-gray-100 p-4 [&[data-collapsed=true]_svg]:rotate-180 [&[data-collapsed=true]_svg]:text-red-500">
<svg class="h-6 w-6 transition-transform" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
</svg>
<span class="ml-2">✅ Rodič má data-collapsed="true" → SVG je otočené a červené</span>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&[data-collapsed=true]_svg]:rotate-180 [&[data-collapsed=true]_svg]:text-red-500">
<svg class="h-6 w-6 transition-transform" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
</svg>
<span class="ml-2">❌ Rodič nemá data-collapsed → SVG normální</span>
</div>
</div>
<!-- #12 Potomek podle CSS třídy rodiče -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#12 Stylování potomka podle CSS třídy rodiče</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&.card--premium_span]:text-yellow-500</code>
<p class="mt-1 text-xs text-gray-600">Čteš to: "Když <strong>tento element</strong> má třídu .card--premium, nastyl jeho <strong>span potomka</strong>"</p>
</div>
<div class="card--premium border-2 border-gray-300 bg-gradient-to-r from-yellow-50 to-orange-50 p-4 [&.card--premium_span]:font-bold [&.card--premium_span]:text-yellow-600">
<span>⭐</span>
<span class="ml-2">✅ Rodič má .card--premium → span je žlutý a tučný</span>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&.card--premium_span]:font-bold [&.card--premium_span]:text-yellow-600">
<span>⭐</span>
<span class="ml-2">❌ Rodič nemá .card--premium → span normální</span>
</div>
</div>
<!-- #13 Složitější příklad - více úrovní -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#13 Komplexnější příklad - vnořené elementy</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&[data-state=error]_.icon]:text-red-500</code>
<p class="mt-1 text-xs text-gray-600">Styluje <strong>jakéhokoliv potomka</strong> s třídou .icon</p>
</div>
<div data-state="error" class="border-2 border-red-300 bg-red-50 p-4 [&[data-state=error]_.icon]:scale-125 [&[data-state=error]_.icon]:text-red-600">
<div class="flex items-center gap-2">
<span class="icon transition-transform">⚠️</span>
<span>✅ Rodič má data-state="error" → ikona je větší a červená</span>
</div>
<div class="mt-2 ml-8">
<span class="icon transition-transform">❌</span>
<span class="ml-2">Vnořená ikona je také stylovaná</span>
</div>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&[data-state=error]_.icon]:scale-125 [&[data-state=error]_.icon]:text-red-600">
<div class="flex items-center gap-2">
<span class="icon transition-transform">⚠️</span>
<span>❌ Rodič nemá data-state="error" → ikona normální</span>
</div>
</div>
</div>
<div class="rounded border-l-4 border-orange-400 bg-orange-50 p-4">
<p class="mb-2 font-semibold text-orange-800">🔑 Klíčový rozdíl:</p>
<div class="space-y-2 text-sm">
<div>
<code class="rounded bg-white px-2 py-1">[[data-collapsed=true]_&]:class</code>
<p class="ml-4 text-gray-700">→ Styluje <strong>tento element</strong>, když <strong>předek</strong> má atribut</p>
</div>
<div>
<code class="rounded bg-white px-2 py-1">[&[data-collapsed=true]_svg]:class</code>
<p class="ml-4 text-gray-700">→ Styluje <strong>potomka</strong>, když <strong>tento element</strong> má atribut</p>
</div>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- KDY CO POUŽÍT -->
<!-- ============================================ -->
<section class="mb-8 rounded-lg border-2 border-blue-300 bg-gradient-to-r from-blue-50 to-purple-50 p-6">
<h2 class="mb-6 text-2xl font-bold">🎯 Kdy co použít?</h2>
<div class="space-y-4">
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-green-700">✅ Použij GROUP syntaxe když:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Máš jasný rodič-dítě vztah v komponentě</li>
<li>Chceš čitelnější a kratší kód</li>
<li>Používáš to opakovaně v jedné komponentě</li>
</ul>
<div class="mt-3 rounded bg-green-50 p-3 text-sm">
<code>group-data-[active]:text-purple-500</code>
</div>
</div>
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-purple-700">✅ Použij ARBITRARY selektory když:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Nechceš přidávat třídu <code class="rounded bg-gray-100 px-1">group</code> na rodiče</li>
<li>Předek je vzdálenější (ne přímý rodič)</li>
<li>Potřebuješ flexibilnější podmínky</li>
</ul>
<div class="mt-3 rounded bg-purple-50 p-3 text-sm">
<code>[[data-theme='dark']_&]:text-white</code>
</div>
</div>
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-orange-700">✅ Stylování potomka podle rodiče:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Když chceš stylovat dítě/vnuka podle stavu rodiče</li>
<li>Rodič má atribut/třídu a potomek se podle toho mění</li>
<li>Užitečné pro ikony, SVG, nested elementy</li>
</ul>
<div class="mt-3 rounded bg-orange-50 p-3 text-sm">
<code>[&[data-collapsed=true]_svg]:rotate-180</code>
</div>
</div>
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-blue-700">✅ Přímé selektory na elementu:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Když stylování závisí jen na vlastním stavu elementu</li>
<li>Nejjednodušší a nejrychlejší varianta</li>
</ul>
<div class="mt-3 rounded bg-blue-50 p-3 text-sm">
<code>data-[active]:bg-blue-500</code>
</div>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- RYCHLÁ REFERENČNÍ TABULKA -->
<!-- ============================================ -->
<section class="rounded-lg border-2 border-gray-300 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold">📋 Rychlá referenční tabulka</h2>
<div class="overflow-x-auto">
<table class="w-full border-collapse text-sm">
<thead>
<tr class="bg-gray-100">
<th class="border p-3 text-left">Situace</th>
<th class="border p-3 text-left">Syntaxe</th>
<th class="border p-3 text-left">Příklad</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border p-3 font-semibold" colspan="3">NA ELEMENTU:</td>
</tr>
<tr>
<td class="border p-3">Data atribut bez hodnoty</td>
<td class="border p-3"><code>data-[active]:class</code></td>
<td class="border p-3"><code>data-[active]:bg-blue-500</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut s hodnotou</td>
<td class="border p-3"><code>data-[state=open]:class</code></td>
<td class="border p-3"><code>data-[state=open]:text-green-500</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut - jen přítomnost</td>
<td class="border p-3"><code>data-state:class</code></td>
<td class="border p-3"><code>data-state:border-orange-500</code></td>
</tr>
<tr>
<td class="border p-3">CSS třída</td>
<td class="border p-3"><code>[&.active]:class</code></td>
<td class="border p-3"><code>[&.active]:font-bold</code></td>
</tr>
<tr>
<td class="border p-3 font-semibold" colspan="3">NA RODIČI (s GROUP):</td>
</tr>
<tr>
<td class="border p-3">Data atribut bez hodnoty</td>
<td class="border p-3"><code>group-data-[active]:class</code></td>
<td class="border p-3"><code>group-data-[active]:text-purple-500</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut s hodnotou</td>
<td class="border p-3"><code>group-data-[state=open]:class</code></td>
<td class="border p-3"><code>group-data-[state=open]:block</code></td>
</tr>
<tr>
<td class="border p-3">CSS třída</td>
<td class="border p-3"><code>group-[.danger]:class</code></td>
<td class="border p-3"><code>group-[.danger]:text-red-500</code></td>
</tr>
<tr>
<td class="border p-3 font-semibold" colspan="3">NA PŘEDKOVI (bez GROUP):</td>
</tr>
<tr>
<td class="border p-3">Data atribut bez hodnoty</td>
<td class="border p-3"><code>[[data-expanded]_&]:class</code></td>
<td class="border p-3"><code>[[data-expanded]_&]:block</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut s hodnotou</td>
<td class="border p-3"><code>[[data-theme='dark']_&]:class</code></td>
<td class="border p-3"><code>[[data-theme='dark']_&]:text-white</code></td>
</tr>
<tr>
<td class="border p-3">CSS třída</td>
<td class="border p-3"><code>[.parent_&]:class</code></td>
<td class="border p-3"><code>[.is-open_&]:opacity-100</code></td>
</tr>
<tr>
<td class="border p-3 font-semibold" colspan="3">POTOMEK PODLE RODIČE:</td>
</tr>
<tr>
<td class="border p-3">Potomek podle data atributu</td>
<td class="border p-3"><code>[&[data-collapsed=true]_svg]:class</code></td>
<td class="border p-3"><code>[&[data-collapsed=true]_svg]:rotate-180</code></td>
</tr>
<tr>
<td class="border p-3">Potomek podle CSS třídy</td>
<td class="border p-3"><code>[&.premium_span]:class</code></td>
<td class="border p-3"><code>[&.premium_span]:text-yellow-500</code></td>
</tr>
<tr>
<td class="border p-3">Potomek s třídou</td>
<td class="border p-3"><code>[&[data-state=error]_.icon]:class</code></td>
<td class="border p-3"><code>[&[data-state=error]_.icon]:text-red-500</code></td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</html>
On gists
JavaScript
DOM Tricks
tricks.js #
// https://medium.com/@ThinkingLoop/12-dom-tricks-no-libraries-required-61268e398c50
// 1) Query once, act many
const $ = (sel, root = document) => root.querySelector(sel);
const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
const app = $('#app');
const buttons = $$('.action', app);
buttons.forEach(btn => btn.addEventListener('click', onAction));
// 2) Event delegation (one listener, infinite items)
$('#list').addEventListener('click', e => {
const btn = e.target.closest('[data-action="remove"]');
if (!btn) return;
e.preventDefault();
btn.closest('li')?.remove();
});
// when we dont want use e.preventDeafult() -> pasive: true, better optimalization
window.addEventListener('scroll', onScroll, { passive: true });
// 3) Build with DocumentFragment (no layout thrash)
const frag = document.createDocumentFragment();
for (const item of data) {
const li = document.createElement('li');
li.textContent = item.name;
frag.appendChild(li);
}
$('#list').appendChild(frag); // one commit
// 4) Render HTML safely with <template>
<template id="row-tpl">
<li class="row">
<span class="name"></span>
<button data-action="remove">×</button>
</li>
</template>
function renderRow(user) {
const tpl = $('#row-tpl').content.cloneNode(true);
tpl.querySelector('.name').textContent = user.name;
return tpl;
}
const frag = document.createDocumentFragment();
users.forEach(u => frag.appendChild(renderRow(u)));
$('#list').appendChild(frag);
// 5) Class toggles beat inline styles
.card { transition: transform .2s ease; }
.card.is-active { transform: scale(1.02); }
$('.card').classList.toggle('is-active', shouldHighlight);
// 6) dataset for behavior, not style
<button data-action="copy" data-copy-text="Hello!">Copy</button>
document.addEventListener('click', e => {
const btn = e.target.closest('[data-action="copy"]');
if (!btn) return;
navigator.clipboard.writeText(btn.dataset.copyText);
});
// 7) Observe, don’t poll (Intersection/Resize/Mutation)
// IntersectionObserver: lazy-load images
const io = new IntersectionObserver(entries => {
entries.forEach(({ isIntersecting, target }) => {
if (!isIntersecting) return;
target.src = target.dataset.src;
io.unobserve(target);
});
}, { rootMargin: '200px' });
$$('img[data-src]').forEach(img => io.observe(img));
// ResizeObserver: reflow grids on size change
const ro = new ResizeObserver(entries => {
for (const { target } of entries) layout(target);
});
ro.observe($('#grid'));
// 8) Batch mutations with requestAnimationFrame
function highlightRow(row) {
// READ
const { top } = row.getBoundingClientRect();
// Schedule WRITE
requestAnimationFrame(() => {
row.style.setProperty('--start', `${top}px`);
row.classList.add('highlight');
});
}
// 9) Virtualize long lists with windowing
const viewport = $('#viewport');
const rowHeight = 32;
let start = 0, end = 0;
viewport.addEventListener('scroll', render);
window.addEventListener('resize', render);
function render() {
const { scrollTop, clientHeight } = viewport;
start = Math.floor(scrollTop / rowHeight);
end = start + Math.ceil(clientHeight / rowHeight) + 5;
const frag = document.createDocumentFragment();
viewport.innerHTML = ''; // clear (or recycle nodes for extra perf)
for (let i = start; i < Math.min(end, data.length); i++) {
const div = document.createElement('div');
div.className = 'row';
div.style.top = `${i * rowHeight}px`;
div.textContent = data[i].name;
frag.appendChild(div);
}
viewport.appendChild(frag);
}
#viewport { position: relative; overflow: auto; height: 400px; }
.row { position: absolute; height: 32px; line-height: 32px; left: 0; right: 0; }
// 10) Custom events for clean boundaries
/ producer
function notifySaved(node, payload) {
node.dispatchEvent(new CustomEvent('saved', { detail: payload, bubbles: true }));
}
// consumer
document.addEventListener('saved', e => {
const { id } = e.detail;
toast(`Saved #${id}`);
});
// 11) Progressive enhancement with feature checks
const supportsClipboard = !!navigator.clipboard?.writeText;
if (supportsClipboard) {
document.body.classList.add('has-clipboard');
// enable fancy copy button
} else {
// use <input> select() + execCommand fallback or plain text
}
// 12) Micro-router: data-route + history.pushState
<nav>
<a href="/settings" data-route>Settings</a>
<a href="/reports" data-route>Reports</a>
</nav>
<main id="view"></main>
const routes = {
'/settings': () => $('#view').textContent = 'Settings ⚙️',
'/reports': () => $('#view').textContent = 'Reports 📈',
};
function go(path) {
history.pushState({}, '', path);
routes[path]?.();
}
document.addEventListener('click', e => {
const link = e.target.closest('a[data-route]');
if (!link) return;
e.preventDefault();
go(new URL(link.href).pathname);
});
window.addEventListener('popstate', () => routes[location.pathname]?.());
routes[location.pathname]?.(); // initial
On gists
SVG
CSS trick
Colorize SVG in CSS
index.html #
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG Mask Test</title>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.test-box {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
/* Test 1: External URL */
.B1 {
display: block;
width: 100px;
height: 100px;
mask-image: url('stripe.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background: red;
}
/* Test 2: Inline SVG jako data URL */
.B2 {
display: block;
width: 100px;
height: 100px;
/* https://yoksel.github.io/url-encoder/ */
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.63 236.36'%3E%3Cpath d='M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z'/%3E%3C/svg%3E");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background: red;
}
/* Test 3: Inline SVG v HTML */
.B3 {
display: block;
width: 100px;
height: 100px;
}
.B3 svg {
width: 100%;
height: 100%;
fill: red;
}
/* Test 4: Webpack prefix */
.B4 {
display: block;
width: 100px;
height: 100px;
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODQuNjMgMjM2LjM2Ij48cGF0aCBkPSJNMTcyLjMzIDBjLTEyLjk1IDE3LjIzLTI1Ljg3IDM0LjQ4LTM4LjYyIDUxLjc5Qzg4LjMxIDExMi45NiA0My40MiAxNzQuMzQgMCAyMzYuMzZoLjAxYzQ5LjU4LTU5LjM4IDk1LjIzLTEyMi45OSAxNDIuODMtMTgzLjIyQzE1Ni45IDM1LjQ4IDE3MC43OCAxNy43NSAxODQuNjMgMHoiLz48L3N2Zz4=');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background: red;
}
</style>
</head>
<body>
<h1>Test SVG masek</h1>
<div class="container">
<div class="test-box">
<h3>Test 1: URL</h3>
<div class="B1"></div>
<p>mask-image: url("")</p>
</div>
<div class="test-box">
<h3>Test 2: Data URL (bez fill)</h3>
<div class="B2"></div>
<p>Inline SVG jako data URL</p>
</div>
<div class="test-box">
<h3>Test 3: Inline SVG</h3>
<div class="B3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.63 236.36">
<path d="M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z" />
</svg>
</div>
<p>SVG přímo v HTML</p>
</div>
<div class="test-box">
<h3>Test 4: Base64 Data URL</h3>
<div class="B4"></div>
<p>Base64 encoded SVG</p>
</div>
</div>
<div style="margin: 20px; padding: 20px; background: #f5f5f5">
<h3>Debugging info:</h3>
<p>Otevřete Developer Tools (F12) a podívejte se na Console a Network tab</p>
<p>Pokud vidíte CORS chyby, problém je v cross-origin policy</p>
</div>
</body>
</html>
On gists
CSS
CSS trick
Css interactions
index.html #
<!--
https://jsbin.com/tuticinojo/1/edit?html,css,output
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pure CSS Interactions Demo</title>
<style>
body {
font-family: sans-serif;
padding: 2rem;
background: #f9fafb;
color: #111;
line-height: 1.5;
}
h2 {
margin-top: 2rem;
border-bottom: 2px solid #eee;
padding-bottom: 0.5rem;
}
/* === ACCESSIBLE FOCUS STYLE === */
button,
.menu-btn,
.open-modal,
.close,
.accordion label {
outline: none;
}
button:focus,
.menu-btn:focus,
.open-modal:focus,
.close:focus,
.accordion label:focus {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
/* === TOGGLE SWITCH === */
.switch {
display: inline-block;
position: relative;
width: 50px;
height: 25px;
}
.switch input {
display: none;
}
.slider {
background: #ccc;
border-radius: 25px;
position: absolute;
inset: 0;
cursor: pointer;
transition: 0.3s;
}
.slider::after {
content: "";
width: 21px;
height: 21px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: 0.3s;
}
.switch input:checked + .slider {
background: #4ade80;
}
.switch input:checked + .slider::after {
transform: translateX(25px);
}
/* === DROPDOWN MENU === */
.menu-btn {
display: inline-block;
margin-top: 1rem;
cursor: pointer;
padding: 0.5rem 1rem;
background: #111;
color: white;
border-radius: 5px;
}
#menu-toggle {
display: none;
}
.menu {
margin-top: 0.5rem;
background: white;
border: 1px solid #ddd;
padding: 0.5rem;
border-radius: 5px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
#menu-toggle:checked + .menu {
max-height: 300px; /* enough space */
}
/* === MODAL === */
.open-modal {
display: inline-block;
margin-top: 1rem;
cursor: pointer;
padding: 0.5rem 1rem;
background: #2563eb;
color: white;
border-radius: 5px;
}
#modal-toggle {
display: none;
}
.modal {
position: fixed;
inset: 0;
display: none;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.6);
}
#modal-toggle:checked + .modal {
display: flex;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 10px;
position: relative;
max-width: 300px;
text-align: center;
}
.close {
display: inline-block;
margin-top: 1rem;
cursor: pointer;
padding: 0.5rem 1rem;
background: #ef4444;
color: white;
border-radius: 5px;
}
/* === ACCORDION === */
.accordion label {
display: block;
cursor: pointer;
padding: 0.5rem;
background: #f3f4f6;
margin-top: 0.5rem;
border-radius: 5px;
}
.accordion input {
display: none;
}
.accordion .content {
max-height: 0;
overflow: hidden;
padding: 0 0.5rem;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
transition: max-height 0.3s ease;
}
.accordion input:checked + label + .content {
max-height: 200px;
padding: 0.5rem;
}
</style>
</head>
<body>
<h1>Pure CSS Interactions Demo</h1>
<h2>1. Toggle Switch</h2>
<label class="switch">
<input type="checkbox" aria-label="Toggle setting" />
<span class="slider"></span>
</label>
<h2>2. Dropdown Menu</h2>
<label for="menu-toggle" class="menu-btn" role="button" aria-expanded="false" aria-controls="menu">Menu</label>
<input type="checkbox" id="menu-toggle" />
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<h2>3. Modal</h2>
<label for="modal-toggle" class="open-modal" role="button">Open Modal</label>
<input type="checkbox" id="modal-toggle" />
<!-- modal closes when background clicked -->
<label for="modal-toggle" class="modal">
<div class="modal-content" role="dialog" aria-modal="true">
<h3>Hello</h3>
<p>This modal works without JS.</p>
<label for="modal-toggle" class="close" role="button">Close</label>
</div>
</label>
<h2>4. Accordion</h2>
<div class="accordion">
<input type="checkbox" id="q1" />
<label for="q1" aria-controls="a1" aria-expanded="false">Question 1</label>
<div class="content" id="a1">Answer to question 1.</div>
<input type="checkbox" id="q2" />
<label for="q2" aria-controls="a2" aria-expanded="false">Question 2</label>
<div class="content" id="a2">Answer to question 2.</div>
</div>
</body>
</html>
On gists
CSS
CSS trick
CSS if
index.html #
<!--
https://jsbin.com/kiliyineca/2/edit?html,css,output
-->
<!-- /// 1 /// -->
<!-- .btn -->
<div class="btn" style="--status: success">Success</div>
<div class="btn" style="--status: danger">Danger</div>
<div class="btn" style="--status: warning">Warning</div>
<div class="btn">Else</div>
<!-- .cover -->
<div class="cover" style="--priority: medium;">Iam Cover</div>
<!-- .container -->
<div class="container">Container</div>
<!-- /// 2 /// -->
<div class="card" data-status="pending">Pending Task</div>
<div class="card" data-status="complete">Completed Task</div>
<div class="card" data-status="inactive">Inactive Task</div>
On gists
CSS
CSS trick
Transition-behavior: allow-discrete
example.css #
/* works in one direction, if both direction is needed, we need to use
@starting-style for second direction, @see: https://www.youtube.com/shorts/xVt8Foa2u7I (Kevin Powell)
/* toggle - two 2 , starting-style needed */
/* https://jsbin.com/sokazavera/edit?html,css,output */
.txt {
background-color: #eee;
padding: 20px;
margin-top: 15px;
border-radius: 4px;
border: 1px solid #ccc;
display: none;
opacity: 0;
transition-property: all;
transition-duration: 1s;
transition-behavior: allow-discrete;
}
.txt.show {
display: block;
opacity: 1;
@starting-style {
opacity: 0;
}
}
/* one way
https://jsfiddle.net/oz6m4ctd/9/
*/
box {
width: 20%;
height: auto;
aspect-ratio: 1/1;
display: block;
position: relative;
transition: all 0.25s;
transition-behavior: allow-discrete;
opacity: 1;
scale: 1;
}
.box.closed {
display: none;
opacity: 0;
scale: 0;
width: 0;
}
On gists
JavaScript
Reexport ES exports
ex.js #
// index.js
export * as MathUtils from "./math.js";
export * as StringUtils from "./string-utils.js";
// Usage:
// import { MathUtils, StringUtils } from './index.js';
// modules/index.js
export { default as Calculator } from "./calculator.js";
export { default as Logger } from "./logger.js";
export * from "./math.js";
export * from "./string-utils.js";
export { ApiClient as Client, HTTP_METHODS as Methods } from "./config.js";
On gists
ES6 dynamic import / export
•
Vue.js
ex.js #
// app.js
async function loadMathModule() {
const mathModule = await import("./math.js");
console.log(mathModule.add(5, 3));
}
// Or with .then()
import("./math.js")
.then((mathModule) => {
console.log(mathModule.PI);
})
.catch((error) => {
console.error("Failed to load module:", error);
});
On gists
JavaScript
4 ways to dynamically execute JavaScript code on the front end
HOW.JS #
// https://medium.com/@bestowensss/4-ways-to-dynamically-execute-javascript-code-on-the-front-end-01648b4f527a
// 1
/*
Synchronous execution;
The execution context is the current scope .
*/
let a = 1;
function test() {
let a = 2;
eval('console.log(a)'); // 2
}
test();
// 2
/*
Synchronous execution;
The execution environment is the global scope .
*/
let a = 1;
function test() {
let a = 2;
let fn = new Function('console.log(a)');
fn(); // 1
}
test();
// 3
// 2
/*
Asynchronous execution;
The execution environment is the global scope .
*/
let a = 1;
function test() {
let a = 2;
setTimeout('console.log(a)', 1000); // 1
}
test();
//4
/*
Synchronous execution;
The execution environment is the global scope .
*/
var a = 1;
let script = document.createElement('script');
script.textContent = 'console.log(1)';
document.body.appendChild(script); // 1