-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcssday-1.html
More file actions
641 lines (494 loc) · 40.4 KB
/
Copy pathcssday-1.html
File metadata and controls
641 lines (494 loc) · 40.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
<!DOCTYPE html>
<html>
<head>
<title>Dag 1 - CSS day 2022 learnings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header class="wrapper">
<div class="grid">
<a class="logo" href="index.html">
<img src="assets/images/cssday-logo.svg" alt="CSSday">
</a>
<nav class="nav--scroll">
<a href="cssday-1.html#jeremy">Jeremy Keith</a>
<a href="cssday-1.html#rachel">Rachel Andrew</a>
<a href="cssday-1.html#lea">Lea Verou</a>
<a href="cssday-1.html#bramus">Bramus van Damme</a>
<a href="cssday-1.html#ana">Ana Ferreira</a>
<a href="cssday-1.html#chris">Chris Lilley</a>
<a href="cssday-1.html#marcin">Marcin Wichary</a>
</nav>
</div>
</header>
<main class="wrapper">
<div class="grid grid--talk">
<article class="talk article col">
<h1>CSSday 2022, Dag 1</h1>
<p>Vrijdag 10 juni @ Zuiderkerk in Amsterdam</p>
</article>
<!-- Talk: Rachel Jeremy Keith -->
<article class="talk article col" id="jeremy">
<!-- Talk: Topic -->
<h2>
<span>In and Out Of Style</span>
<span>Why standards matter</span>
</h2>
<!-- Talk: Speaker -->
<div class="talk__speaker">
<a class="speaker__image" href="https://twitter.com/adactio" target="_blank">
<img src="assets/images/speaker-jeremy-keith.jpg" alt="Jeremy Keith">
</a>
<div class="speaker__details">
<div>
<a class="text-lg" href="https://twitter.com/adactio" target="_blank">
<strong class="text-lg">Jeremy Keith</strong>
</a>
</div>
<div class="text-md">
<span>Founder / Developer</span> @
<a href="https://clearleft.com/" target="_blank">Clearleft</a>
</div>
</div>
</div>
<!-- Talk: Summary -->
<p id="jeremy-web-history">Jeremy heeft al eens eerder op het podium van een CSSday gestaan, dit keer trapt hij de editie van 2022 af. In zijn talk neemt hij ons mee in een inspirerend verhaal over de geschiedenis van het World Wide Web. In zijn verhaal is de kern van de boodschap dat gebruikers resistent zijn tegen veranderingen. Toch is er in de loop der jaren al veel veranderd. Hierbij wordt <strong id="jeremy-path-dependence">path dependence</strong> (padafhankelijkheid) toegepast. Wat betekend dat bestaande methodes worden gebruikt voor herkenbaarheid en gedeelde overeenkomsten bij verniewing. Vandaar dat herkenbaarheid belangrijk is, want mensen zijn gewoontedieren en houden niet van grote veranderen.</p>
<h3 id="jeremy-css-history">Hoe styling evolueerde</h3>
<p>Stapsgewijs neemt Jeremy mee aan de hand van een aantal slides hoe HTML en CSS is geëvolueerd naar wat het nu is. Het begon ooit met een beperkte set aan HTML elementen als <code><font></code>, <code><big></code> en <code><center></code> waarbij de <i>selector</i> en <i>declaration</i> voor de stijling veel weg had van JavaScript <i>syntax</i>. Door de doorontwikkelingen en de kleine wijzigingen die daarbij toegepast werd is het nu de HTML en CSS <i>syntax</i> van wat wij nu kennen. Keith geeft daarbij aan dat HTML en CSS simpeler in gebruik is geworden, maar dat maakt het niet meteen makkelijker in gebruik door de komst van vele nieuwe CSS <i>properties</i> en <i>functions</i>.</p>
<blockquote>
“And kids, that's where CSS comes from”
<cite>Jeremy Keith</cite>
</blockquote>
<h3 id="jeremy-the-future">De toekomst</h3>
<ul>
<li>Met Cascade Layers <code>@layer</code> is een toevoeging aan de CSS Specificity.
<div class="highlight highlight--reference">
<a href="cssday-1.html#bramus">The CSS Cascade, A Deep Dive door Bramus van Damme</a>
</div>
</li>
<li>Met Scoping <code>@scope</code> zet je de stijling vast op een substructuur of fragment op een webpagina.
<div class="highlight highlight--reference">
<a href="cssday-2.html#tab">The Future of Organizing Your CSS door Tab Atkins-Bittner</a>
</div>
</li>
</ul>
<h3 id="jeremy-open-ui">Wat ontbreekt er nog?</h3>
<p>Het stijlen van formulier bedieningselementen is en blijft lastig, met name bij datumkiezers, selecties en kleurkiezers. Hiervoor heeft Jeremy wel een tip, kijk eens naar het project <a href="https://open-ui.org/" target="_blank">open-ui.org</a>. Het doel van dit project is om <i>native</i> besturingselementen te stylen en uit te breiden. Webstandaarden in de browser vormen de basis om op voort te bouwen, het is uniform en daardoor herkenbaar.</p>
<!-- Talk: Bookmarks -->
<!-- Talk: Slides & Video -->
<p class="highlight highlight--reference">
Bekijk de slides: <a href="https://www.dropbox.com/s/bfgtlzv90jxjz00/InAndOutOfStyle.pdf?dl=0" target="_blank">In and Out Of Style @ Dropbox</a><br>
Bekijk de video: <a href="https://www.youtube.com/watch?v=CdZZcbZG83o" target="_blank">In and Out Of Style Talk @ YouTube</a>
</p>
</article>
<!-- Talk: Rachel Andrew -->
<article class="talk article col" id="rachel">
<!-- Talk: Topic -->
<h2>
<span>Interop 2022</span>
<span>A commit to improve interoperability</span>
</h2>
<!-- Talk: Speaker -->
<div class="talk__speaker">
<a class="speaker__image" href="https://twitter.com/rachelandrew" target="_blank">
<img src="assets/images/speaker-rachel-andrew.jpg" alt="Rachel Andrew">
</a>
<div class="speaker__details">
<div>
<a href="https://twitter.com/rachelandrew" target="_blank">
<strong class="text-lg">Rachel Andrew</strong>
</a>
</div>
<div class="text-md">
<span>Technical Writer</span> @
<a href="https://web.dev/authors/rachelandrew/" target="_blank">Google LLC / web.dev</a>
</div>
</div>
</div>
<!-- Talk: Summary -->
<p id="rachel-interop-2022">Interop 2022 is een samenwerking tussen de grote browser ontwikkelaars <a href="https://webkit.org/blog/12288/working-together-on-interop-2022/" target="_blank">Apple</a>, <a href="https://web.dev/interop-2022/" target="_blank">Google</a>, <a href="https://aka.ms/microsoft-interop2022" target="_blank">Microsoft</a> en <a href="https://hacks.mozilla.org/2022/03/interop-2022/" target="_blank">Mozilla</a> met daarnaast ook twee softwareadviesbureaus <a href="https://bocoup.com/blog/interop-2022" target="_blank">Bocoup</a> en <a href="https://igalia.com/news/interop2022.html" target="_blank">Igalia</a>. Het doel van deze samenwerking is om voor een consistenter web te zorgen door gezamenlijk te focussen op dezelfde (door)ontwikkelingen van webtechnieken.</p>
<h3 id="rachel-compat-2021">Interop 2022 / Compat 2021: 5 Focus Areas afgerond</h3>
<ol>
<li><code>aspect-ratio:</code> om de beeldverhouding van het element te bepalen, <a href="https://css-tricks.com/aspect-ratio-boxes/">nooit meer de padding hack!</a></li>
<li><code>gap:</code> voor Flexbox is geintroduceerd.</li>
<li><code>self-start;</code> en <code>self-end;</code> als properties voor rtl ltr uitlijning richting voor Flexbox en Grid.</li>
<li><code>position: sticky;</code> om een element te laten plakken, eindelijk geen JavaScripts meer nodig.
<div class="highlight highlight--reference">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning">Sticky positioning @ MDN Web Docs</a>
</div>
</li>
<li><code>transform:</code> voor betere ondersteuning van <code>rotate()</code>, <code>scale()</code>, <code>skew()</code> en <code>translate()</code>.
<div class="highlight highlight--reference">
<a href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">Individual Transform Properties @ drafts.csswg.org</a>
</div>
</li>
</ol>
<h3 id="rachel-focus-areas">Interop 2022: 10 Focus Areas in (door)ontwikkeling</h3>
<ol>
<li>Cascade Layers <code>@layer</code> is een toevoeging aan de CSS Specificity om er meer invloed op te hebben, door de styling te prioriteren in <i>layers</i>.
<div class="highlight highlight--reference">
<a href="cssday-1.html#bramus">The CSS Cascade, A Deep Dive door Bramus van Damme</a>
</div>
</li>
<li>Color Spaces and Functions <code>color-mix()</code> en <code>color-contrast()</code>.
<div class="highlight highlight--reference">
<a href="cssday-1.html#chris">Escaping the sRGB Prison</a>
</div>
</li>
<li>Containment <code>contain:</code> voor het isoleren van de styling tot een bepaald element op de pagina wat ten goede komt aan de prestatie van de pagina.
<div class="highlight highlight--reference">
<a href="cssday-2.html#michelle">Creative CSS Layout door Michelle Barker</a>
</div></li>
<li><code><dialog></code> voor een native dialog/modal inclusief achtergrond styling en een JS API om het te openen of te sluiten.
<div class="highlight highlight--reference">
<a href="https://web.dev/building-a-dialog-component/">Building a dialog component @ web.dev</a>
</div>
<div class="highlight highlight--reference">
<a href="https://css-tricks.com/dialog-components-roll-your-own/" target="_blank">Dialog Components: Go Native HTML or Roll Your Own? @ CSS-Tricks</a>
</div>
</li>
<li><code>accent-color:</code> om <i>form elements</i> om in een keer de accent kleur toe te passen op controls en het <i>pseudo-element</i> <code>:checked</code>.</li>
<li><code>overscroll-behavior:</code> en <code>scroll-snap</code> voor scrolling. Het einde is nabij voor sliders met (veel) JavaScript.
<div class="highlight highlight--reference">
<a href="cssday-2.html#adam">Oh Snap! That Scroll Control door Adam Argyle</a>
</div>
</li>
<li><code>subgrid;</code> om de grid styling te overerven van <i>parent</i> naar <i>child</i> grids.
<div class="highlight highlight--reference">
<a href="cssday-2.html#michelle">Creative CSS Layout door Michelle Barker</a>
</div>
</li>
<li>Viewport Units: <code>dvh</code> dynamic viewport height, <code>lvh</code> largest viewport height en <code>svh</code> smalled viewport height. Welke zorgen voor een betere ondersteuning van de wisselende viewport op mobiele devices.
<div class="highlight highlight--reference">
<a href="https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/">The Large, Small, and Dynamic Viewports @ bram.us</a>
</div>
</li>
</ol>
<h3 id="rachel-progress">Voortgang van de Focus Areas</h3>
<p>De voortgang van de Focus Areas is op het <a href="https://wpt.fyi/interop-2022" target="_blank">Interop 2022 Dashboard</a> te zien, de scores per browser op het dashboard worden door <a href="https://web-platform-tests.org/" target="_blank">Web Platform Tests</a> berekend.</p>
<h3 id="rachel-community-and-2023">Bijdrage leveren aan het testen en Interop 2023</h3>
<p>Er is er nog genoeg om te testen en verbeteren. Iedereen kan een bijdrage leveren aan het testen door bugs te melden in het <a href="https://github.com/web-platform-tests/interop-2022/issues/">Interop 2022 project op Github</a>, zo heb je indirect invloed op verbeteringen. Of als je ideeën hebt waar <a href="https://github.com/web-platform-tests/interop-2022/issues/78">Interop 2023</a> zich op moet focussen dan kan je dit aangeven.</p>
<!-- Talk: Bookmarks -->
<h3>Bookmarks</h3>
<ul>
<li><a href="https://ishadeed.com/article/position-sticky-css-grid/" target="_blank">Using Position Sticky With CSS Grid @ ishadeed.com</a></li>
</ul>
<!-- Talk: Slides & Video -->
<p class="highlight highlight--reference">
Bekijk de slides: <a href="https://noti.st/rachelandrew/MSFKri/interop-2022" target="_blank">Interop 2022 @ Notist</a><br>
Bekijk de video: <a href="https://www.youtube.com/watch?v=w_gOOW2ARMk" target="_blank">Interop 2022 Talk @ YouTube</a>
</p>
</article>
<!-- Talk: Lea Verou -->
<article class="talk article col" id="lea">
<!-- Talk: Topic -->
<h2>
<span>CSS Variable secrets</span>
<span>Isn't just a root element</span>
</h2>
<!-- Talk: Speaker -->
<div class="talk__speaker">
<a class="speaker__image" href="https://twitter.com/leaverou" target="_blank">
<img src="assets/images/speaker-lea-verou.webp" alt="Lea Verou">
</a>
<div class="speaker__details">
<div>
<a href="https://twitter.com/leaverou" target="_blank">
<strong class="text-lg">Lea Verou</strong>
</a>
</div>
<div class="text-md">
<span>Elected Participant</span> @
<a href="https://www.w3.org/" target="_blank">W3C</a>
</div>
</div>
</div>
<!-- Talk: Summary -->
<p id="lea-web-almanac-2021">De eerste echte diepgaande talk van de dag wordt gehouden door Lea, zij constateerde aan de hand van <a href="https://almanac.httparchive.org/en/2021/css" target="_blank">Web Almanac 2021</a> dat niet de uiterste potentie van deze <i>CSS-functie</i> <code>var()</code> wordt gebruikt door gebruik te maken van de <a href="https://almanac.httparchive.org/en/2021/css#custom-properties" target="_blank">custom property depth</a>. Veelal worden CSS-variabelen enkel geplaatst in de <code>:root</code> of <code><html></code> selector. Terwijl dit ook op specifiekere selectoren kan of met <a href="https://projects.verou.me/talks/dynamic-css-secrets/#slide-custom-properties-in-2021" target="_blank">custom properties</a> en de reactieve eigenschap die het dan heeft.</p>
<div class="talk__image">
<figure>
<img class="img-landscape" src="assets/images/talk-lera-verou-softw-report-custom-property-depth.png" alt="Custom Property Depth">
<figcaption>Custom Property Depth</figcaption>
</figure>
</div>
<p id="lea-custom-property-depth">In een aantal voorbeelden laat Lea zien hoe zij met <code>@container</code> van de <strong>CSS Containment Module</strong> gebruikt in combinatie met <code>style()</code> en daarin een <i>variable</i> plaats met een specifieke <i>value</i> <code>--glossy: on</code>. In een paar voorbeelden past Lea ook tricks toe om tot het juiste resultaat te komen, zo liet zij zien dat je een <strong>number</strong> naar een <strong>integer</strong> kan omzetten door gebruik te maken van <code>var()</code> en <code>calc()</code>.</p>
<p>Verder toonde Lea met een aantal code voorbeelden wat er in de toekomst mogelijk zal zijn met <strong>Custom Property Depth</strong> en nieuwe <strong>CSS-functies</strong>:</p>
<ul>
<li id="lea-counter-reset"><code>counter-reset:</code> om een <strong>integer</strong> te converteren naar een <strong>string</strong> waardoor het een object met een reeks van tekens wordt.</li>
<li id="lea-round"><code>round()</code> om de CSS <i>value</i> naar beneden of boven af te ronden.</li>
</ul>
<!-- Talk: Bookmarks -->
<h3>Bookmarks</h4>
<ul>
<li><a href="https://lea.verou.me/2021/10/custom-properties-with-defaults/" target="_blank">Custom properties with defaults: 3+1 strategies</a></li>
<li><a href="https://lea.verou.me/2021/06/inherit-ancestor-font-size-for-fun-and-profit/" target="_blank">Inherit ancestor font-size, for fun and profit</a></li>
<li><a href="https://lea.verou.me/2021/05/82-of-developers-get-this-3-line-css-quiz-wrong/" target="_blank">82% of developers get this 3 line CSS quiz wrong</a></li>
<li><a href="https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/" target="_blank">The --var: ; hack to toggle multiple values with one custom property</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/var" target="_blank">MDN Web Docs: var()</a></li>
<li><a href="https://caniuse.com/mdn-html_elements_var" target="_blank">Can I Use: var()</a></li>
<li><a href="https://almanac.httparchive.org/en/2021/css" target="_blank">Web Almanac 2021: CSS</a></li>
<li><a href="https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/" target="_blank">DRY Switching with CSS Variables: The Difference of One Declaration @ css-tricks.com</a></li>
<li><a href="https://github.com/w3c/csswg-drafts/issues/7379" target="_blank">[css-variables-2] Custom units as simple variable desugaring #7379 @ github.com</a></li>
</ul>
<!-- Talk: Slides & Video -->
<p class="highlight highlight--reference">
Bekijk de slides: <a href="https://projects.verou.me/talks/dynamic-css-secrets/" target="_blank">CSS Variable Secrets @ verou.me</a><br>
Bekijk de video: <a href="https://www.youtube.com/watch?v=ZuZizqDF4q8" target="_blank">CSS Variable Secrets @ YouTube</a>
</p>
</article>
<!-- Talk: Bramus van Damme -->
<article class="talk article col" id="bramus">
<!-- Talk: Topic -->
<h2>
<span>The CSS Cascade</span>
<span>A deep dive</span>
</h2>
<!-- Talk: Speaker -->
<div class="talk__speaker">
<a class="speaker__image" href="https://twitter.com/bramus" target="_blank">
<img src="assets/images/speaker-bramus-van-damme.jpg" alt="Bramus van Damme">
</a>
<div class="speaker__details">
<div>
<a href="https://twitter.com/bramus" target="_blank">
<strong class="text-lg">Bramus van Damme</strong>
</a>
</div>
<div class="text-md">
<span>Chrome DevRel Engineer</span> @
<a href="https://about.google/" target="_blank">Google LLC</a>
</div>
</div>
</div>
<!-- Talk: Summary -->
<p>Met Bramus namen we een diepe duik in CSS Specificity en wat de toevoeging van het nieuwe Cascade Layers betekend en hoe het toegepast kan worden.</p>
<h3 id="bramus-css-specicifity">Wat is CSS Specicifity</h3>
<p>De CSS Specificity is het algoritme dat door browsers wordt gebruikt om te bepalen welke <i>CSS-declaration</i> het meest relevant is voor een element, wat op zijn beurt de <i>CSS-property</i> met de toegewezen <i>CSS-value</i> bepaalt die op het element moet worden toegepast. Het algoritme berekent het gewicht van een <i>CSS-selector</i> om te bepalen welke regel van concurrerende <i>CSS-declarations</i> op een element wordt toegepast.</p>
<div class="talk__gallery">
<figure>
<img src="assets/images/talk-bramus-van-damme-css-specificity-1.jpg" alt="CSS Specificity uitleg">
<figcaption>CSS Specificity uitleg</figcaption>
</figure>
<figure>
<img src="assets/images/talk-bramus-van-damme-css-specificity-2.jpg" alt="CSS Specifity calculator">
<figcaption>CSS Specifity calculator</figcaption>
</figure>
</div>
<h3 id="bramus-cascade-layers">Introductie van Cascade layers</h3>
<p>Door het gebruik van een van de vele specifieke <i>pseudo-classes</i>, waaronder de nieuwe <code>:is()</code>, <code>:has()</code>, <code>:where()</code> en <code>:not()</code>, of het gebruiken van een standaard stijling kan het een behoorlijke uitdaging zijn om eerder vastgelegde stijling te overschrijven.</p>
<p>Een veel gebruikte "oplossing" is door <code>!important</code> toe te voegen aan de <i>CSS-value</i>, maar is dit wenselijk? Eigenlijk niet, want deze kan ook weer overschreven worden door een <i>CSS-declaration</i> met hogere CSS Specificity waarde. Ook maakt het de styling <i>messy</i> wanneer <code>!important</code> vaak wordt toegepast.</p>
<p>Door de komst van Cascade Layers als toevoeging naast de CSS Specificity wordt het mogelijk om styling aan de hand van <code>@layer</code> te ordenen en een hogere of lagere prioriteit te geven. Wat ervoor zorgt dat je eerder vastgelegde styling makkelijk kan overschrijven, waarbij de gewenste structuur van de styling intact blijft.</p>
<div class="talk__gallery">
<figure>
<img src="assets/images/talk-bramus-van-damme-css-layers-1.jpg" alt="Cascade Layers">
<figcaption>Cascade Layers</figcaption>
</figure>
<figure>
<img src="assets/images/talk-bramus-van-damme-css-layers-2.jpg" alt="Cascade Layers">
<figcaption>Cascade Layers</figcaption>
</figure>
</div>
<p id="bramus-layer">Het aantal <i>layers</i> en de namen van de <i>layers</i> kan je zelf volledig bepalen. Bramus had in zijn talk de <i>layers</i> de volgende namen gegeven: <i>reset</i>, <i>base</i>, <i>components</i> en <i>utilities</i>.</p>
<pre>
<code>@layer reset, base, components, utilities;</code>
</pre>
<pre>
<code>
@layer reset {<br>
...<br>
}<br><br>
@layer base {<br>
...<br>
}<br><br>
@layer components {<br>
...<br>
}<br><br>
@layer utilities {<br>
...<br>
}<br>
</code>
</pre>
<!-- Talk: Bookmarks -->
<h3>Bookmarks</h4>
<ul>
<li><a href="https://polypane.app/css-specificity-calculator/" target="_blank">CSS Specifity calculator</a></li>
<li><a href="https://www.npmjs.com/package/@bramus/specificity" target="_blank">CSS Specifity NPM package van Bramus</a></li>
<li><a href="https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/" target="_blank">The Future of CSS: Cascade Layers (CSS @layer)</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank">MDN Web Docs: @layer</a></li>
<li><a href="https://caniuse.com/mdn-css_at-rules_layer" target="_blank">Can I Use: @layer</a></li>
<li><a href="https://www.matuzo.at/blog/2022/specificity/" target="_blank">CSS Specificity Demo @ matuzo.at</a></li>
<li><a href="https://ishadeed.com/article/css-has-parent-selector/" target="_blank">CSS Parent Selector @ ishadeed.com</a></li>
<li><a href="https://www.projectwallace.com/blog/css-complexity" target="_blank">CSS complexity, it's complicated @ projectwallace.com</a></li>
</ul>
<!-- Talk: Slides & Video -->
<p class="highlight highlight--reference">
Bekijk de slides: <a href="https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1" target="_blank">The CSS Cascade, a deep dive @ slidr.io</a><br>
Bekijk de video: <a href="https://www.youtube.com/watch?v=zEPXyqj7pEA" target="_blank">The CSS Cascade, a deep dive @ YouTube</a>
</p>
</article>
<!-- Talk: Ana Ferreira -->
<article class="talk article col" id="ana">
<!-- Talk: Topic -->
<h2>
<span>Collaborating without Borders</span>
<span>Challenges for a remote company</span>
</h2>
<!-- Talk: Speaker -->
<div class="talk__speaker">
<a class="speaker__image" href="https://twitter.com/theanaferreira" target="_blank">
<img src="assets/images/speaker-ana-ferreira.jpeg" alt="Ana Ferreira">
</a>
<div class="speaker__details">
<div>
<a href="https://twitter.com/theanaferreira" target="_blank">
<strong class="text-lg">Ana Ferreira</strong>
</a>
</div>
<div class="text-md">
<span>Head of Design</span> @
<a href="https://doist.com/" target="_blank">Doist</a>
</div>
</div>
</div>
<!-- Talk: Summary -->
<p>Ana is Head of Design bij Doist, een bedrijf wat volledig remote werkt en een tweetal online communicatie tools ontwikkeld: <a href="https://todoist.com/" target="_blank">Todoist</a> en <a href="https://twist.com/" target="_blank">Twist</a>. In haar talk deelt Ana de <i>challenges</i> waar Doist tegenaan liep als volledige remote bedrijf.</p>
<ul>
<li id="ana-trust"><strong>Challenge 1: Trust</strong><br> Vetrouwen is essentieel en is iets wat gecreëerd moet worden net als het opstellen van duidelijke richtlijnen.</li>
<li id="ana-communication"><strong>Challenge 2: Communication</strong><br> Communicatie sinds de corona pandemie is het aantal meeting uren toegenomen en worden werknemers sneller gestoord in hun werkzaamheden.</li>
<li id="ana-empower"><strong>Challenge 3: Empower</strong><br> Werknemers hebben niet altijd genoeg macht om beslissingen te nemen en zelfstandig in teamverband stappen te maken.</li>
<li id="ana-documentation"><strong>Challenge 4: Documentation</strong><br> Om besproken punten en beslissingen vast te leggen als naslagwerk voor andere of nieuwe collega's en input voor marktingteksten.</li>
<li id="ana-humans-first"><strong>Challenge 5: Humans' first</strong><br> Respecteer de tijd en het welzijn van mensen.</li>
</ul>
<!-- Talk: Bookmarks -->
<!-- Talk: Slides & Video -->
<p class="highlight highlight--reference">
Bekijk de slides: <a href="https://cssday.nl/_downloads/2022/collaborating-without-borders-ana-ferreira.pdf" target="_blank">Collaborating without Borders @ cssday.nl</a><br>
Bekijk de video: <a href="https://www.youtube.com/watch?v=i6RmVPLFqeg" target="_blank">Collaborating without Borders @ YouTube</a>
</p>
</article>
<!-- Talk: Chris Lilley -->
<article class="talk article col" id="chris">
<!-- Talk: Topic -->
<h2>
<span>Escaping the sRGB Prison</span>
<span>Make colors more prettier</span>
</h2>
<!-- Talk: Speaker -->
<div class="talk__speaker">
<a class="speaker__image" href="https://twitter.com/svgeesus" target="_blank">
<img src="assets/images/speaker-chris-lilley.jpeg" alt="Chris Lilley">
</a>
<div class="speaker__details">
<div>
<a href="https://twitter.com/svgeesus" target="_blank">
<strong class="text-lg">Chris Lilley</strong>
</a>
</div>
<div class="text-md">
<span>Technical Director</span> @
<a href="https://www.w3.org/" target="_blank">W3C</a>
</div>
</div>
</div>
<!-- Talk: Summary -->
<p>Chris heeft een behoorlijk track record voor en op het web. Zo is hij onder andere betrokken geweest bij de ontwikkeling van <code>@font-face</code>, mede-ontwikkelaar van de webfont bestandsextensies <code>.woff</code> en <code>.woff2</code> en hij is de bedenker van de <code>.svg</code>. Tegenwoordig is hij Technical Director bij het W3C waar hij al sinds 1996 werkt en houdt hij zich bezig met de <strong>CSS Color Levels</strong>.</p>
<p id="chris-color-spaces">De talk van Chris gaat daarom ook over de digitale kleurentheorie en de ontwikkelingen die het doormaakt voor op websites. Zijn standpunt is dat wij momenteel vastzitten aan een beperkt aantal kleuren door <strong>Hex</strong>, <strong>RGB</strong> en <strong>HSL</strong>, terwijl het kleurenspectrum groter is met de <strong>color spaces</strong>: <code>Lab</code>, <code>OKLab</code>, <code>LCH</code>, <code>OKLCH</code> en <code>P3</code>. Met name bij <code>P3</code> is het next-big-thing voor kleuren, doordat het afkomstig is van films voor diepere en vollere kleuren. Naast deze nieuwe <strong>color spaces</strong> zijn er ook nieuwe functies voor kleuren in CSS:</p>
<ul>
<li id="chris-color"><code>color()</code> een <i>CSS-function</i> om een kleur op te geven in verschillende vooraf gedefinieerde of aangepaste <strong>color spaces</strong>.</code>
<div class="highlight highlight--reference">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color">color() @ MDN Web Docs</a>
</div>
</li>
<li id="chris-color-mix"><code>color-mix()</code> een <i>CSS-function</i> om twee kleuren op te geven welke met elkaar gemixt worden.
<div class="highlight highlight--reference">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix">color-mix() @ MDN Web Docs</a>
</div>
</li>
<li id="chris-color-contrast"><code>color-contrast()</code> een <i>CSS-function</i> waarin meerdere kleuren worden opgegeven naast een vaste waarde om de kleur met de hoogste contrastwaarde uit de lijst te selecteren.
<div class="highlight highlight--reference">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast">color-contrast() @ MDN Web Docs</a>
</div>
</li>
</ul>
<p id="chris-css-color-levels">De nieuwe <strong>color spaces</strong> en <strong>functies</strong> zijn onderdeel van <strong>CSS Color Levels 4 en 5</strong>.
<div class="highlight highlight--reference">
Een week na CSSday 2022 laat <a href="https://twitter.com/bramus/status/1537421398494392320" target="_blank"> Bramus @ Twitter</a> weten dat de functie <code>color-contrast()</code> is <a href="https://github.com/w3c/csswg-drafts/issues/7310#issuecomment-1156687605" target="_blank">uitgesteld naar CSS Color Level 6 @ Github</a>.
</div>
</p>
<!-- Talk: Bookmarks -->
<h3>Bookmarks</h4>
<ul>
<li><a href="https://www.w3.org/TR/css-color-4/" target="_blank">CSS Color Level 4 @ w3.org</a></li>
<li><a href="https://www.w3.org/TR/css-color-5/" target="_blank">CSS Color Level 5 @ w3.org</a></li>
<li><a href="https://www.smashingmagazine.com/2022/05/accessible-design-system-themes-css-color-contrast/" target="_blank">Manage Accessible Design System Themes With CSS Color-Contrast() @ smashingmagazine.com</a></li>
</ul>
<!-- Talk: Slides & Video -->
<p class="highlight highlight--reference">
Bekijk de slides: <a href="https://svgees.us/Escape-sRGB/" target="_blank">Escaping the sRGB Prison @ svgees.us</a><br>
Bekijk de video: <a href="https://www.youtube.com/watch?v=zkun6wAPc1s" target="_blank">Escaping the sRGB Prison @ YouTube</a>
</p>
</article>
<!-- Talk: Marcin Wichary -->
<article class="talk article col" id="marcin">
<!-- Talk: Topic -->
<h2>
<span>I pressed ⌘B</span>
<span>You wouldn't believe what happened next</span>
</h2>
<!-- Talk: Speaker -->
<div class="talk__speaker">
<a class="speaker__image" href="https://twitter.com/mwichary" target="_blank">
<img src="assets/images/speaker-marcin-wichary.jpeg" alt="Marcin Wichary">
</a>
<div class="speaker__details">
<div>
<a href="https://twitter.com/mwichary" target="_blank">
<strong class="text-lg">Marcin Wichary</strong>
</a>
</div>
<div class="text-md">
<span>Design Manager</span> @
<a href="https://figma.com/" target="_blank">Figma</a>
</div>
</div>
</div>
<!-- Talk: Summary -->
<p id="marcin-figma">De talk van Marcin lag het dichtsbij mijn dagelijkse werkzaamheden als UX/UI Designer, gezien hij bij Figma werkt als Design Manager en dat mijn primaire tool is voor het maken van UI Designs. Het marktaandeel van Figma is de afgelopen jaren gigantisch gegroeid door het gemak, prestaties en snelle doorontwikkeling. Dat levert ook weleens hoofdpijn op, want dat zorgt ook voor wensen en problemen bij de vele gebruikers.</p>
<div class="talk__gallery">
<figure>
<img src="assets/images/talk-marcin-wichary-user-problems.jpg" alt="Mo' people = mo' problems">
<figcaption>Mo' people = mo' problems</figcaption>
</figure>
<figure>
<img src="assets/images/talk-marcin-wichary-font-weight-names.jpg" alt="People, we have clearly a font-weight problem">
<figcaption>People, we have clearly a font-weight problem</figcaption>
</figure>
</div>
<h3 id="marcin-shorcuts">Sneltoets om tekst dikgedrukt te maken</h3>
<p id="marcin-user-issues">Bij Figma kwam namelijk de melding binnen dat wanneer een gebruiker op <strong>⌘B</strong> drukte er niets gebeurde. Op humoristische manier en met een goede opbouw vertelde en toonde Marcin waar hij onder andere tegenaan liep bij het uitzoeken van het probleem en wat de oplossing kan zijn.</p>
<h3 id="marcin-font-weight-bold">Wat is <span class="text-900">dikgedrukt</span>?</h3>
<p>Er zijn namelijk verschillende aanduidingen voor een lettergewicht:</p>
<ul>
<li id="marcin-font-weights">In CSS zijn er voor <code>font-weight</code> getalswaardes van 100 t/m 900, afhankelijk van hoe uitgebreid het font is worden de getalswaardes in stappen van 100 ondersteund. In het geval van het Google Font Source Sans Pro:<br> <span class="text-200">200</span>, <span class="text-300">300</span>, <span class="text-400">400</span>, <span class="text-600">600</span>, <span class="text-700">700</span> en <span class="text-900">900</span>.</li>
<li>In applicaties hebben lettergewichten een naam bijvoorbeeld:<br> <span class="text-200">ExtraLight</span>, <span class="text-300">Light</span>, <span class="text-400">Regular</span>, <span class="text-600">SemiBold</span>, <span class="text-700">Bold</span> en <span class="text-900">Black</span></li>
<li>Wat als het font geen standaard bold lettergewicht heeft? Pak je dan het eerst volgende lettergewicht en tot hoever ga je? Want wordt het verschil tussen het basis lettergewicht <span class="text-400">Regular / 400</span> dan niet te groot als bijvoorbeeld <span class="text-900">Black / 900</span> wordt opgepakt voor dikgedrukte tekst?</li>
</ul>
<p>Door dit en vele andere gebruikersproblemen is Marcin inmiddels een echte kenner geworden op het gebied van fonts en shortcuts binnen Figma.</p>
<!-- Talk: Bookmarks -->
<!-- Talk: Slides & Video -->
<p class="highlight highlight--reference">
Bekijk de slides: <a href="https://www.figma.com/file/oYytmoVFpa5hjWpZApKkPv/%E2%8C%98B-2022-edition" target="_blank">I pressed ⌘B. You wouldn't believe what happened next @ Figma</a>
</p>
</article>
</div>
</main>
<footer class="wrapper">
<div class="grid">
<div class="col">
<p class="text-sm txt-center">Alle andere handelsmerken, productnamen en bedrijfsnamen of -logo's die in dit verslag vermeld worden, zijn eigendom van hun respectieve eigenaars.</p>
</div>
</div>
</footer>
</body>
</html>