Skip to content

Commit

Permalink
v3.0.beta
Browse files Browse the repository at this point in the history
  • Loading branch information
@cssence
cssence committed Mar 3, 2024
1 parent bebda2b commit dc4bc21
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 131 deletions.
9 changes: 4 additions & 5 deletions docs/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ body {
margin: 0;
padding-block: 1em 3em;
padding-inline: .75em;
overflow-x: auto;
overflow-y: scroll;
overflow: hidden scroll;
scroll-behavior: auto;
}
@media (prefers-reduce-motion: no-preference) {
Expand Down Expand Up @@ -133,11 +132,11 @@ tbody tr {
align-self: end;
grid-area: year;
}
[aria-labelledby="presentations"] td:nth-child(4)::before {
[aria-labelledby="presentations"] :is(th, td):nth-child(4)::before {
content: '';
display: inline-block;
inline-size: 2ch;
block-size: 1.125ch;
inline-size: 1rem;
block-size: .75rem;
mask: no-repeat url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath fill="%23000" d="M15.938 32c0 0-9.938-14.062-9.938-20.062 0-11.813 9.938-11.938 9.938-11.938s10.062 0.125 10.062 11.875c0 6.187-10.062 20.125-10.062 20.125zM16 6c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z"%3E%3C/path%3E%3C/svg%3E') -0.0625ch center / 1.125ch 1.125ch;
background-color: currentColor;
forced-color-adjust: preserve-parent-color;
Expand Down
62 changes: 31 additions & 31 deletions docs/slides-cssingraz2024/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" id="interactive">
<html lang="en">
<head>
<meta charset="utf-8">
<title>High Contrast Mode, for real | @CSSence | #CSS-in-Graz</title>
Expand All @@ -10,25 +10,25 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav><a href="download.pdf" data-alternate="PDF">Download</a> <a href="#interactive" data-alternate="JS">Interactive</a></nav>
<nav><a href="download.pdf">Download</a> </nav>
<main>

<div>
<div id="0">
<div style="--size:80vw">
<h1>High Contrast Mode, for real</h1>
<p>@CSSence<br><small><i>🗣</i> Matthias Zöchling</small></p>
<p>CSS in Graz<br><small><i>🌐</i> Graz, Austria<br><time datetime="2024-02-27"><i>📅</i> 2024-02-27</time></small></p>
</div>
</div>

<div>
<div id="1">
<div>
<h2>What?</h2>
<p style="--align:center">(High) Contrast Mode?</p>
</div>
</div>

<div>
<div id="2">
<div style="--size:80vw">
<blockquote>
<p>The main feature is that it <strong>limits and controls the range of colors,</strong> making it easier for users to emphasize content and UI in a way that works for them.</p>
Expand All @@ -38,7 +38,7 @@ <h2>What?</h2>
</div>
</div>

<div>
<div id="3">
<div>
<blockquote>
<p>Unlike other operating system display modes that invert colors or set a dark mode flag, Windows High Contrast Mode completely overrides authored colors with user-set colors.</p>
Expand All @@ -47,13 +47,13 @@ <h2>What?</h2>
</div>
</div>

<div>
<div id="4">
<p><img src="win10-hcm-off.webp" style="--x:40vw" alt="The Settings Page in Windows 10, navigated to Ease of Access, Vision, High Contrast."></p>
<p data-step="1"><img src="win10-hcm-on.webp" style="--x:40vw" alt="The same Settings page, but now High Contrast Mode is turned on: A theme with light text on dark background chosen."></p>
<p data-step="2"><img src="win10-hcm-themes.webp" style="--size:30dvh;--x:70vw;--y:40dvh" alt="The list of four available default themes in Windows 10, including a fifth, created by the user, named ‘Custom’."></p>
</div>

<div>
<div id="5">
<div>
<h3><i>⚠️</i> Low Contrast</h3>
<blockquote>
Expand All @@ -63,7 +63,7 @@ <h3><i>⚠️</i> Low Contrast</h3>
</div>
</div>

<div>
<div id="6">
<div>
<h2>Why?</h2>
<blockquote>
Expand All @@ -73,7 +73,7 @@ <h2>Why?</h2>
</div>
</div>

<div>
<div id="7">
<div style="--size:80vw">
<h2>How?</h2>
<ul>
Expand All @@ -84,7 +84,7 @@ <h2>How?</h2>
</div>
</div>

<div>
<div id="8">
<div>
<h3>OS</h3>
<ul>
Expand All @@ -96,15 +96,15 @@ <h3>OS</h3>
</div>
</div>

<div>
<div id="9">
<div>
<h3>Browsers</h3>
<p style="--align:center">Support is good.<b data-step="1">*</b></p>
<p data-step="2" style="--align:center"><small>*) With Safari being the exception.</small></p>
</div>
</div>

<div>
<div id="10">
<div style="--size:80vw">
<blockquote>
<p>There is a ton of prior content discussing Windows High Contrast Mode (WHCM) and web content. The catch is that content covers four (five?) different implementations across more than a decade of support: Internet Explorer, Edge, the other Edge, Edge plus IE aliasing, and hardly anything on Firefox. Which means much of it no longer applies.</p>
Expand All @@ -113,14 +113,14 @@ <h3>Browsers</h3>
</div>
</div>

<div>
<div id="11">
<div>
<h2>For real!</h2>
<p style="--align:center"><i>🥁</i></p>
</div>
</div>

<div>
<div id="12">
<div>
<h3>What happens… (1/2)</h3>
<ul>
Expand All @@ -136,7 +136,7 @@ <h3>What happens… (1/2)</h3>
</div>
</div>

<div>
<div id="13">
<div>
<h3>What happens… (2/2)</h3>
<ul>
Expand All @@ -152,7 +152,7 @@ <h3>What happens… (2/2)</h3>
</div>
</div>

<div>
<div id="14">
<div style="--size:80vw">
<h3>The media query</h3>
<pre><code>@media (forced-colors: active<b>*</b>) {
Expand All @@ -162,17 +162,17 @@ <h3>The media query</h3>
</div>
</div>

<div>
<div id="15">
<div style="--size:80vw">
<h3>The other media query</h3>
<pre><code>@media (prefers-contrast: more<b>*</b>) {
…
}</code></pre>
<p style="--align:center"><b>*</b>) no-preference | more | less | custom</p>
<p style="--align:center">*) no-preference | more | less | custom</p>
</div>
</div>

<div>
<div id="16">
<div style="--size:80vw">
<h3>The future media query?</h3>
<pre><code>@media (prefers-contrast: <del>forced</del><ins>custom</ins>) {
Expand All @@ -182,7 +182,7 @@ <h3>The future media query?</h3>
</div>
</div>

<div>
<div id="17">
<div style="--size:80vw">
<h3>The retired media query</h3>
<pre><code>@media (-ms-high-contrast: active) {
Expand All @@ -191,7 +191,7 @@ <h3>The retired media query</h3>
</div>
</div>

<div>
<div id="18">
<div style="--size:80vw">
<h3>Combining media queries</h3>
<pre><code>@media (forced-colors: active) and
Expand All @@ -201,7 +201,7 @@ <h3>Combining media queries</h3>
</div>
</div>

<div>
<div id="19">
<div>
<h2>The ToDo List (1/2)</h2>
<ul>
Expand All @@ -214,7 +214,7 @@ <h2>The ToDo List (1/2)</h2>
</div>
</div>

<div>
<div id="20">
<div style="--size:80vw">
<h3 data-step="1">Transparent is a color</h3>
<pre><code>:focus {
Expand All @@ -225,7 +225,7 @@ <h3 data-step="1">Transparent is a color</h3>
</div>
</div>

<div>
<div id="21">
<div>
<h2>The ToDo List (2/2)</h2>
<ul>
Expand All @@ -238,14 +238,14 @@ <h2>The ToDo List (2/2)</h2>
</div>
</div>

<div>
<div id="22">
<div>
<h3>The Backplate</h3>
<p style="--align:right"><img src="win-hcm-backplate.webp" alt="The same picture of a cat two times, left and right. The text ‘Hello Kitty!’ has been placed on top of each. However, the right one also shows a black background behind the text, hiding parts of the cat for better legibility. This background is called a backplate in High Contrast Mode."><br>Image on the right has backplate applied.</p>
<p style="--align:center"><img src="win-hcm-backplate.webp" alt="The same picture of a cat two times, left and right. The text ‘Hello Kitty!’ has been placed on top of each. However, the right one also shows a black background behind the text, hiding parts of the cat for better legibility. This background is called a backplate in High Contrast Mode."><br>Image on the right has backplate applied.</p>
</div>
</div>

<div>
<div id="23">
<div style="--size:80vw">
<h3>The Override</h3>
<pre><code>.element {
Expand All @@ -255,7 +255,7 @@ <h3>The Override</h3>
</div>
</div>

<div>
<div id="24">
<div>
<h2 class="x">Outro</h2>
<h3><i>⚠️</i> Testing</h3>
Expand All @@ -267,7 +267,7 @@ <h3><i>⚠️</i> Testing</h3>
</div>
</div>

<div>
<div id="25">
<div style="--size:80vw">
<h3><i>⚠️</i> color(s)</h3>
<pre><code>@media (forced-<u>colors</u>: active) {
Expand All @@ -279,7 +279,7 @@ <h3><i>⚠️</i> color(s)</h3>
</div>
</div>

<div>
<div id="26">
<div>
<hr>
<p style="--align:center">You’ve made it this far!</p>
Expand Down
25 changes: 16 additions & 9 deletions docs/slides-cssingraz2024/slide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const init = () => {
});
let current = 0;
const slide = (dir) => {
if (slideMap[current]) {
if (slideMap[current] && dir === 1) {
const currentStep = parseInt(slides[current].getAttribute('data-current'), 10);
if (currentStep + dir >= 0 && currentStep + dir <= slideMap[current]) {
slides[current].setAttribute('data-current', '' + (currentStep + dir));
Expand All @@ -17,24 +17,31 @@ const init = () => {
slides[current].removeAttribute('data-current');
current += dir;
slides[current].setAttribute('data-current', dir === -1 ? '' + slideMap[current] : '0');
const animate = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
slides[current].scrollIntoView({ behavior: animate ? 'smooth' : 'instant' });
// history.pushState({}, window.title, `#${slides[current].id}`);
};
const navigate = (event) => {
event.preventDefault();
const dir = {'ArrowUp': -1, 'ArrowLeft': -1, 'ArrowRight': 1, 'ArrowDown': 1}[event.key];
if (dir) slide(dir);
};
const act = (event) => {
const target = '#interactive';
if (location.hash === target) {
document.querySelector('nav').innerHTML += ' <button aria-pressed="false">Interactive</button>';
document.querySelector('nav button').addEventListener('click', (event) => {
const newState = event.target.getAttribute('aria-pressed') === 'false';
event.target.setAttribute('aria-pressed', newState);
if (newState === true) {
const id = location.hash ? location.hash.slice(1) : '';
const target = parseInt(id, 10);
if (target == id) current = target;
slides[current].setAttribute('data-current', '0');
window.addEventListener('keydown', navigate);
} else if (event && new URL(event.oldURL).hash === target) {
slides[current].scrollIntoView({ behavior: 'instant' });
} else {
slides[current].removeAttribute('data-current');
current = 0;
window.removeEventListener('keydown', navigate);
}
};
act();
window.addEventListener("hashchange", act);
});
};
if (document.readyState !== 'loading') {
init();
Expand Down
Loading

0 comments on commit dc4bc21

Please sign in to comment.