sesta: has a layers

Author: ondras

KAJ/index.html

@@ -91,7 +91,7 @@ <h2>Přednášky</h2>
 				<li><a href="prednasky/09/">Offline; HTML značky &lt;svg&gt; a &lt;audio&gt;</a></li>
 				<li><a href="prednasky/10/">HTML značky &lt;video&gt; a &lt;canvas&gt;</a></li>
 				<li><a href="prednasky/11/">Další JavaScriptová API</a></li>
-				<li><a href="prednasky/12/">Web Components</a></li>
+				<li><a href="prednasky/12/">Web Components a CSS Nesting</a></li>
 				<li><a href="prednasky/13-server-side-js/">JS na serveru</a></li>
 
 				<li><a href="prednasky/13-dalsi-api/">Další, obskurnější JS API</a></li>

KAJ/prednasky/06/index.html

@@ -18,6 +18,11 @@
 			  content: "✘ ";
 			  color: red;
 			}
+
+			.cascade img {
+				float: right;
+				height: 700px;
+			}
 		</style>
 	  </body>
 </html>

KAJ/prednasky/06/index.md

@@ -7,7 +7,8 @@
   1. Vývoj CSS
   1. Selektorový jazyk
   1. Generovaný obsah
-  1. Media queries
+  1. Media queries a responsive design
+  1. CSS Layers
   1. Preprocessing
 
 ---
@@ -44,7 +45,7 @@ Obecně není možné vytvářet selektory, pro jejichž vyhodnocení potřebuje
 
 Valná většina selektorů se tedy týká uzlů samotných, jejich rodičů či předchůdců.
 
-Toto pravidlo bude v budoucnu porušováno teprve plnou podporou selektoru `:has`.
+Toto pravidlo ~~bude v budoucnu~~ je porušováno teprve plnou podporou selektoru `:has`.
 
 ---
 
@@ -202,6 +203,32 @@ input:not([required]) { color: blue; }
 
 ---
 
+# Selektorový jazyk – pseudotřídy
+
+  - `:is()` = sjednocení
+
+```css
+:is(li, p, a) { font-weight: bold; }  /* stejné jako bez is() */
+
+:is(header, footer) :is(a, em, strong) { color: lime; }  /* cekem 6 kombinací
+```
+
+---
+
+# Selektorový jazyk – pseudotřídy
+
+  - `:has()` = výběr rodiče za předpokladu existence potomka
+
+```css
+label:has(:checked) { font-weight: bold; }
+
+h1:has(+ p) { margin-bottom: 0; }
+
+p:has(img, a) { border-left: 3px solid salmon; }
+```
+
+---
+
 # Selektorový jazyk – pseudoprvky
 
   - `::first-line` = první řádek textu
@@ -387,6 +414,73 @@ maximum-scale, minimum-scale, user-scalable
 
 ---
 
+# CSS Layers
+
+  - Nástroj pro snazší řešení problémů se *specificitou* selektorů
+  - Často není nezbytné, ale může se hodit
+  - [Přednáška o CSS Layers](https://ondras.zarovi.cz/slides/2022/css-layers-webexpo/)
+
+---
+
+# CSS Layers
+
+```html
+<form>
+  <button type=submit disabled>Odeslat</button>
+</form>
+```
+
+```css
+form button[type=submit] {
+  background-color: dodgerblue;
+}
+
+button:disabled {
+  background-color: gray;
+}
+```
+
+---
+
+# CSS Layers
+
+![](https://ondras.zarovi.cz/slides/2022/css-layers-webexpo/img/cascade.svg) {.cascade}
+
+Kaskáda: jak poznat, které z kolidujících pravidel má přednost?
+
+(následně: jak zařídit, aby to bylo jinak?)
+
+---
+
+# CSS Layers
+
+Pomocí syntaxe `@layer` lze explicitně přednost aplikace pravidel řídit
+
+```css
+@layer muj-projekt {
+  form button[type=submit] {
+    background-color: dodgerblue;
+  }
+}
+
+@layer docasne-stavy {
+  button:disabled {
+    background-color: gray;
+  }
+}
+```
+
+---
+
+# CSS Layers
+
+  - Mnoho dalších variant zápisu a pravidel
+    - Zanořování
+    - Oddělení deklarace a definice vrstev
+  - Nezvyklá kombinace s přívlastkem `!important`
+
+---
+
 # Vendor prefix #1
 
   - Problém: výrobce chce podporovat technologii, která není plně standardizovaná
@@ -448,9 +542,12 @@ p a {
 
 # Preprocessing: Less.js
 
-  - Velké množství (dalších) možností rozšíření jazyka
-  - Aplikace buď na straně serveru, nebo automaticky pomocí JS knihovny
   - Podobných nástrojů je celá řada (SASS, Compass, PostCSS, &hellip;)
+  - Důvody pro existenci:
+    - ~~Proměnné~~ (viz osmá přednáška)
+    - ~~Zanořování~~ (viz dvanáctá přednáška)
+    - ~~Barevná aritmetika~~ (viz [CSS Relative Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors))
+    - Bundling
 
 ---
 

KAJ/prednasky/12/index.md

@@ -1,4 +1,6 @@
-# KAJ 12: Web Components
+# KAJ 12: Web Components a CSS Nesting
+
+FIXME nesting
 
 ---