Web dev & architect
at Antreem
display: contents
?
.wrapper { display: grid; grid-template-columns: 1fr 1fr; }
.purple { display: contents; }
display: none
for the element, but not its descendants
display: none
, but what else?<button>Add</button>
button { text-transform: uppercase; }
<nav> <ul> <li><a href="…">Home</a></li> <li><a href="…">Page</a></li> <li><a href="…">Site</a></li> </ul> </nav>
ul { display: flex; list-style: none; ... }
VoiceOver on Mac
|
|
|
Many elements are mapped 1-1:
<nav>
β navigation<header>
β banner<ul>
, <ol>
β list<a>
β linkIt's <em>really</em> important
paragraphAnd others are expanded:
videoHz
and kHz
are CSS units?font-size
line-height
too!normal
≈ 1.2
:root {
font-size: 20px;
line-height: 30px;
}
:root {
font-size: 125%;
line-height: 1.5;
}
The oldest dev trick
<img src="image.png">
img:not([alt]) {
&:not([role]), &:not([role=presentation]) {
outline: 1px solid red;
}
}
<i class="fa fa-home"></i>
.fa-home::before {
content: '\f015';
}
(except for IE)
aria-hidden="true"
, oraria-label="home"
in the markup.icon-home::before { content: '\f015'
/ 'home';
}
.icon-home::before {
content: '\f015';
alt: 'home';
}
brucelawson.co.uk/2014/notes-on-draft-css-alt-property
<i class="icon icon-home" data-meaning="Home"></i>
.icon-home::before { content: '\f015' / attr(data-meaning); }
aria-label
, then.)@media screen and (min-width: 1025px) {
#app {
display: grid;
grid-template-columns: 15% auto 20%;
grid-template-area: "head head head"
"nav main side"
"nav main ads";
}
}
<div id="app">
<header>...</header>
<nav>...</nav>
<aside>...</aside>
<aside class="ads">...</aside>
<main>...</main>
<footer>...</footer>
</div>
prefers-reduced-motion
Values: reduce | no-preference
prefers-color-scheme
Values: light | dark | no-preference
prefers-contrast
Values: high | low | no-preference
prefers-reduced-transparency
Values: reduce | no-preference
forced-colors
Values: active | none
light-level
Values: normal | dim | washed
inverted-colors
Values: active | none
Contrast ratio for:
hsl()
50%
50%
50%
50%
50%
50%
33%
94%
79%
85%
16%
43%
Toss a coin to your witcher,
o valley of plenty
o valley of plenty
@each $question in $questions {
@include answer($question);
}