!”#$%&&$#’()$*++”,,’-‘.’(/$ ‘0$1’02 Rachel Andrew : https://noti.st/rachelandrew
Slide 1
Slide 2
!”#$%&”#%’#”()%%’+#%,”-#./0#1223
Slide 3
1/’4%‘“0#56”0%”-7#-68+0%97#)4-)49”# $4:”0-7#’”;#)/$/0#.6’)%/’-#<
Slide 4
%&&$34’2 Separation of content and presentation for the first time
Slide 5
<table> <tr> <td colspan=”3”>My header</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Slide 6
Slide 7
5)”$678./$34*’.9$.*/8:( https://alistapart.com/article/holygrail/
Slide 8
Slide 9
<div class=”row”> <div class=”col-md-4”>.col-md-4</div> <div class=”col-md-4”>.col-md-4</div> <div class=”col-md-4”>.col-md-4</div> </div> <div class=”row”> <div class=”col-md-6”>.col-md-6</div> <div class=”col-md-6”>.col-md-6</div> </div>
Slide 10
!”#)/6$9’=#+”#*//#.40#4;4:#.0/,# >”#9/)6,”’#-/60)”#/09”0
Slide 11
!841*.$;.8# The design and content had to flow together
Slide 12
body { display: grid; grid-template-columns: 240px 1fr 150px; grid-template-areas: “hd hd hd” “lt bd rt” “ft ft ft”; } #left { grid-area: lt;} #header { grid-area: hd; } #footer { grid-area: ft; } #right { grid-area: rt; } #center { grid-area: bd; }
Slide 13
Slide 14
5)”$(“+)0’+.$.’1’((‘80$ )*,$<80” Just because you can doesn’t mean you should.
Slide 15
ul { display: grid; gap: 20px; grid-template-columns: repeat(6, minmax(0,1fr)); grid-template-areas: “a a b b b b” “c c d d e e” “f f g g h h”; } .card1 .card2 .card3 .card4 .card5 .card6 .card7 .card8 { { { { { { { { grid-area: grid-area: grid-area: grid-area: grid-area: grid-area: grid-area: grid-area: c; f; d; h; e; a; g; b; } } } } } } } }
Slide 16
https://cdpn.io/xxRJBGz
Slide 17
ul { display: grid; gap: 20px; grid-template-columns: repeat(7, minmax(0,1fr)); grid-auto-flow: dense; }
Slide 18
https://cdpn.io/NWbLRQE
Slide 19
nav ul { display: flex; gap: .2em; flex-direction: row-reverse; }
Slide 20
https://cdpn.io/zYoLbOp
Slide 21
=>8’2’0<$,8:4+”?.*/8:($ 2’,+800”+( How can web developers avoid this problem?
Slide 22
@80A($;84<”($*-8:($()”$ 28+:1”0( Can you load your document without CSS and it still make sense?
Slide 23
!/0?#;%*>#’/0,4$#.$/;@
Slide 24
A#;”$$B/09”0”9#9/)6,”’#,4?”-# )0”4%’+#.4$$84)?-#,6)>#”4-%”0@
Slide 25
C”-*#*48#/09”0
Slide 26
Slide 27
D”-%-#>”#“,E4*%/’#/#.$4**”’#:/60# -/60)”#/#,4?”#”&”0:*>%’+#4#)>%$9#/.# *>”#+0%9#)/’*4%‘“0@
Slide 28
,:-<4’2 84$2’,B.*/C+80(“0(, Do you want to keep the boxes and inherit the grid tracks, or lose the boxes for presentational purposes?
Slide 29
,:-<4’2 Allowing child grid to inherit track sizing from a parent.
Slide 30
Slide 31
.cards { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } .cards li { display: grid; grid-template-rows: auto 1fr auto; } @supports (grid-template-rows: subgrid) { .cards { grid-auto-rows: auto 1fr auto; } .cards li { grid-row: auto / span 3; grid-template-rows: subgrid; gap: 0; } }
Slide 32
https://cdpn.io/VwmEMap
Slide 33
2’,B.*/C$+80(“0(,D Remove boxes from visual layout
Slide 34
<div class=”flex”> <div class=”item”><a href=”/”>Flex item 1</a></div> <div class=”item”><a href=”/”>Flex item 2</a></div> <ul> <li><a href=”/”>One</a></li> <li><a href=”/about”>Two</a></li> <li><a href=”/history”>Three</a></li> </ul> </div>
Slide 35
Slide 36
.flex ul { display: contents; }
Slide 37
https://cdpn.io/oNYapVb
Slide 38
E*40’0<F A bug in display: contents implementation caused elements to be removed from the accessibility tree.
Slide 39
G’H”2F In Chrome 89 and Firefox 62
Slide 40
Slide 41
%)481”$IJ$;:..$ *++”,,’-‘.’(/$(4”” https://developer.chrome.com/blog/full-accessibility-tree/
Slide 42
1>”)?#>4#)>4’+%’+#9%-E$4:#:E”# >4-#’/#)>4’+”9#>/;#>%’+-#0”E/0# /#4))”—%8%$%:#*”)>’/$/+:@
Slide 43
@80A($;’H$,8:4+”$B48-.”1,$ #’()$<4’2$84$;.”H-8H For example: using order to rearrange items.
Slide 44
Slide 45
ul { display: flex; gap: .2em; } li:nth-child(4) { order: -1; }
Slide 46
https://cdpn.io/ExNprGw
Slide 47
K+80(*’0”4 Container Queries
Slide 48
.sidebar { container-type: inline-size; } @container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
Slide 49
1>”)?#>4#>”#,40?6E#/.#0”6-48$”# )/,E/’”’-#,4?”-#-“’-“#%’#”4)># $/)4*%/’@
Slide 50
<div class=”media”> <h2 class=”media-heading”>Level 2 heading</h2> </div> <aside> <div class=”media”> <h3 class=”media-heading”>Level 3 heading</h2> </div> </aside>
Slide 51
C;8+:,L>’,’-.” Detect if someone is navigating using the keyboard.
Slide 52
:focus-visible { outline: 4px dashed darkorange; }
Slide 53
5*M”$+*4”F Users who are using a mouse and also keyboard navigating might find the appearance and disappearance of the ring confusing.
Slide 54
+8.84L+80(4*,(NO Choose the color with the highest contrast from a list.
Slide 55
.box { padding: 1em; background-color: var(—background); color: color-contrast(var(—background) vs #000, #fff); width: 200px; }
Slide 56
https://cdpn.io/XWzapXJ
Slide 57
B4”;”4,L+8.84L,+)”1” Matching the user choice of dark or light theme.
Slide 58
!”#$%&$#’#$#()#%*#+,-%’#-./$#” § § § § § § prefers-reduced-motion prefers-reduced-transparency prefers-contrast prefers-color-scheme forced-colors prefers-reduced-data
Slide 59
@media (prefers-color-scheme: light) { /* css for light theme */ }
Slide 60
=$24M$()”1”$’,0A($.#/,$ 184”$++”,,’-.”P Give users a way to toggle to a theme other than the one used by their operating system.
Slide 61
https://web.dev/building-a-theme-switch-component/
Slide 62
+8.84L,+)”1” Can this component be rendered in this color scheme?
Slide 63
.widget { color-scheme: light; }
Slide 64
;84+”2L+8.84, A media feature to detect a forced colors mode such as Windows High Contrast.
Slide 65
@media (forced-colors: active) { /* customization for forced colors mode */ }
Slide 66
Q”$,:4”$(8$(“,($#”..$#)”0$ :,’0<$$0”#$;”(:4” Even a feature that is designed to enhance accessibility might bring with it some new problem for certain groups of people.
Slide 67
R*’,”$0”#$*SS/$’,,:”,$#’()$ -48#,”4, If you find a bug that is creating an accessibility issue don’t assume someone else will have already logged it.
Slide 68
5)*0M$/8:F https://noti.st/rachelandrew
