core css draft
This commit is contained in:
BIN
src/img/2026/core-css.png
Normal file
BIN
src/img/2026/core-css.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
414
src/posts/2026/2026-05-07-core-css.md
Normal file
414
src/posts/2026/2026-05-07-core-css.md
Normal file
@ -0,0 +1,414 @@
|
||||
---
|
||||
title: core CSS
|
||||
image:
|
||||
src: 2026/core-css.png
|
||||
alt: "A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley."
|
||||
tags:
|
||||
- reference
|
||||
- software
|
||||
draft: true
|
||||
---
|
||||
|
||||
What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few [browser defaults](https://browserdefaultstyles.com/){target="_blank" rel="external"} for a more pleasant browsing experience without needing much if any visual testing.
|
||||
|
||||
Want to just see the final stylesheet? [Skip to the end of the page](#result).
|
||||
|
||||
## CSS resets
|
||||
|
||||
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually. I would, quite specifically, grab his rules 1 (box-sizing model) and 6 (improve media defaults). I also cover the ruleset from "improve media defaults" later under [the images section](#images), with an additional rule.
|
||||
|
||||
## color
|
||||
|
||||
Complex color palettes are a no-go. But browser defaults are also pretty bad - stark black and white are really hard on sighted users' eyes. Dulling the black and white down to nearby grays helps a lot. And of course, we'll support light and dark modes.
|
||||
|
||||
```css
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--color-light: #ddd;
|
||||
--color-dark: #222;
|
||||
|
||||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
```
|
||||
|
||||
### accents
|
||||
|
||||
Skip this section and go right to [focus indication](#focus-indication) if you have never had any color vision. If you've previously had color vision, have partial color vision, etc, read on.
|
||||
|
||||
If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/){target="_blank" rel="external"} that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}. You might color your headers and links.
|
||||
|
||||
If you're coloring links, it's worth considering browser defaults. Blue is unvisited, purple is visited, and red is inactive. Choosing a red or purple link color might confuse users. Blues are pretty safe. A green might be fun.
|
||||
|
||||
Being the person that I am, I'm picking a teal and a pink. XKCD labels these "dark teal" (contrast ratio of 7.11 against our gray-white) and "powder pink" (contrast ratio of 9.49 against our gray-black) respectively.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-teal: #014d4e;
|
||||
--color-pink: #ffb2d0;
|
||||
|
||||
--color-accent: light-dark(var(--color-teal), var(--color-pink));
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
```
|
||||
|
||||
## focus indication
|
||||
|
||||
Focus indication is a visual change that occurs when something interactive on the screen (like a link) receives keyboard focus. Without it, sighted keyboard-only users can't tell where they are on the page. Conventionally, it's an outline. [Read more about accessible focus indication](https://www.sarasoueidan.com/blog/focus-indicators/){target="_blank" rel="external"}.
|
||||
|
||||
I would recommend a *smidge* of padding (spacing *inside* the border or outline of an element) around your links to allow for more space between the letters and focus outline in order to help with legibility.
|
||||
|
||||
If you recolor your links as mentioned in the previous section, recolor your focus indication for cohesiveness! Additionally, if you overwrite the browser default focus outline in this way or any other, you might want to add a very small border radius to your links. I find that perfectly square corners are a bit of a harsh look, but I'll admit this one is kind of personal preference.
|
||||
|
||||
```css
|
||||
a {
|
||||
padding: .1rem;
|
||||
border-radius: .05rem;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: solid var(--color-accent);
|
||||
}
|
||||
```
|
||||
|
||||
## font
|
||||
|
||||
All-serif everything (a common browser default) is, uh, kinda ugly and overwhelming. Little tails on every letter are visual clutter, at least to my eyes. It feels outdated, like an old-timey newspaper. Picking serif for headers and sans-serif for body (or vice versa) can be a nice alternative. Plus, the contrast will help on lower-level headings... if you ever drill down to `h5`s or `h6`s anyway.
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: serif;
|
||||
}
|
||||
```
|
||||
|
||||
## margins
|
||||
|
||||
Margins create visual space around an element, and this whitespace helps significantly with focus. We're *super super not* going to reset the margins for everything. That puts us in design hell and becomes a very visually-oriented problem. Instead, we're just changing two things: the width of the body and where it sits on the page. Readers, particularly dyslexic readers, can more easily move to the next line when they are not trying to track back across the full width of the screen.
|
||||
|
||||
This margin rule defines a small amount of top/bottom space first (`1rem`), and then tells the page to make the left and right margins equal with `auto` - centering the body in the middle of the page. I'm also going to set a `max-width` to handle those mystical ultra-wide screens (never used one), and a couple of breakpoints for tablets and mobile.
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 65%;
|
||||
max-width: 1800px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
body {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
body {
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## links
|
||||
|
||||
One quick note about accessible links: they should be identifiable by a method other than color. Basically, don't turn off your underlines! Additionally, I would recommend against using underlines for emphasis elsewhere - use `<em>` or `<strong>` instead.
|
||||
|
||||
## images
|
||||
|
||||
As mentioned up top, this overlaps with the linked CSS Reset writeup.
|
||||
|
||||
By default, an image will be full size. If it's a large image, that can be even larger than the viewport. We'll give them a `max-width` and center them in case they are narrower than the body. `display: block` allows that centering to actually work.
|
||||
|
||||
```css
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
## headers, footers, navs
|
||||
|
||||
Let's talk the components that every page likely has - a header, a footer, and navs. I'm going to use a very simple design for our header - a [skip link](https://webaim.org/techniques/skipnav/){target="_blank" rel="external"}, an (optional) site title (the title could also be one of the nav links), and then an unordered list of links enclosed in a `nav` element. Like the following:
|
||||
|
||||
```html
|
||||
<header>
|
||||
<a id="skip" href="#main">Skip to content</a>
|
||||
|
||||
<h2><a href="/">This is my cool website</a></h2>
|
||||
|
||||
<nav aria-label="main menu navigation">
|
||||
<ul>
|
||||
<li><a href="/header-nav-1/">Header nav item 1</a></li>
|
||||
<li><a href="/header-nav-2/">Header nav item 2</a></li>
|
||||
<li><a href="/header-nav-3/">Header nav item 3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
and our footer will be similar:
|
||||
|
||||
```html
|
||||
<footer>
|
||||
<nav aria-label="footer navigation">
|
||||
<ul>
|
||||
<li><a href="/footer-nav-1/">Footer nav item 1</a></li>
|
||||
<li><a href="/footer-nav-2/">Footer nav item 2</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
```
|
||||
|
||||
### skip link
|
||||
|
||||
Let's handle the skip link first. Your skip link can be hard to style without visual feedback. Commonly, they start hidden and only appear when receiving keyboard focus. It's entirely reasonable, in my opinion, to leave it visible. **I actually like this as a design choice**, as it highlights the idea and hopefully purpose of a skip link to sighted readers. However, if you want to hide it, there's a lot (a *lot*) of ways to do so. Using `position: absolute`, `left`, and `top`, we can place the skip link outside of the page, then move it in when it receives focus. We'll also stick a background on there to prevent the text from overlaying our site title and becoming illegible.
|
||||
|
||||
```css
|
||||
#skip {
|
||||
background-color: var(--color-bg);
|
||||
position: absolute;
|
||||
left: -999px;
|
||||
top: -999px;
|
||||
}
|
||||
|
||||
#skip:focus-visible {
|
||||
left: 10%;
|
||||
top: 5%;
|
||||
}
|
||||
```
|
||||
|
||||
### site title
|
||||
|
||||
I won't do much here, but I am going to remove the underline (which is the default for links). It's commonly understood that the site title (or sometimes just the word "home") links to the home page, and the underline is unnecessary visual clutter.
|
||||
|
||||
```css
|
||||
header h2 {
|
||||
text-decoration: none;
|
||||
}
|
||||
```
|
||||
|
||||
### flexbox navs
|
||||
|
||||
We're going to dip our toes into flexbox for this one - it allows us to make content fall neatly into rows or columns. It's pretty powerful, and can get pretty weird, but we'll keep it bare-bones.
|
||||
|
||||
By default, the unordered lists in the navs will display with each list item on a new line with a bullet point in front of the list item. Let's take up less space by putting them all on one line. I'm going to center the items, and I'm going to allow them to wrap onto a new line. I'm also taking the bullet points off of the list items and allowing for a bit of space between each item.
|
||||
|
||||
```css
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: row wrap;
|
||||
list-style: none;
|
||||
gap: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
### aria-current
|
||||
|
||||
Screen reader users get `aria-current` information, and it can be helpful to present it to sighted users as well. There are of course many ways to do this with color, but we'll avoid that. Let's add carets before and after the current page link to indicate this. We'll scope them only to the header and footer just in case we run across a weird case.
|
||||
|
||||
```css
|
||||
header a[aria-current="page"]::before,
|
||||
footer a[aria-current="page"]::before {
|
||||
content: "> " / "";
|
||||
}
|
||||
|
||||
header a[aria-current="page"]::after,
|
||||
footer a[aria-current="page"]::after {
|
||||
content: " <" / "";
|
||||
}
|
||||
```
|
||||
|
||||
The content after the forward slash is what is conveyed to screen reader users. The carets are not useful from a screen reader perspective, so this excerpts them.
|
||||
|
||||
### separating header and footer from main
|
||||
|
||||
The header and footer can visually run into the main text area if there's not extra space or a border. We'll keep it simple with borders. If you're not using an accent color, use your text color instead.
|
||||
|
||||
```css
|
||||
header {
|
||||
border-bottom: solid var(--color-accent);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: solid var(--color-accent);
|
||||
}
|
||||
```
|
||||
|
||||
## print media
|
||||
|
||||
There's a couple straightforward additions we can make to handle printing the site cleanly and making best use of the physical paper space. Remove the header and footer, reset the width and colors to limit ink usage, and print link URLs after the link.
|
||||
|
||||
```css
|
||||
@media print {
|
||||
header,
|
||||
footer,
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
body,
|
||||
h1, h2, h3, h4, h5,
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## feedback
|
||||
|
||||
Did I make a mistake? Is there more I could add? [Reach out](/contact/)!
|
||||
|
||||
## result
|
||||
|
||||
Here's our outcome.
|
||||
|
||||
```css
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--color-light: #ddd;
|
||||
--color-dark: #222;
|
||||
--color-teal: #014d4e;
|
||||
--color-pink: #ffb2d0;
|
||||
|
||||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||||
--color-accent: light-dark(var(--color-teal), var(--color-pink));
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-family: sans-serif;
|
||||
width: 65%;
|
||||
max-width: 1800px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
body {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
body {
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Basic elements */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
a {
|
||||
padding: .1rem;
|
||||
border-radius: .05rem;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: solid var(--color-accent);
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header, footer, nav */
|
||||
header {
|
||||
border-bottom: solid var(--color-accent);
|
||||
}
|
||||
|
||||
#skip {
|
||||
background-color: var(--color-bg);
|
||||
position: absolute;
|
||||
left: -999px;
|
||||
top: -999px;
|
||||
}
|
||||
|
||||
#skip:focus-visible {
|
||||
left: 10%;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
header a[aria-current="page"]::before,
|
||||
footer a[aria-current="page"]::before {
|
||||
content: "> " / "";
|
||||
}
|
||||
|
||||
header a[aria-current="page"]::after,
|
||||
footer a[aria-current="page"]::after {
|
||||
content: " <" / "";
|
||||
}
|
||||
|
||||
header h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: row wrap;
|
||||
list-style: none;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: solid var(--color-accent);
|
||||
}
|
||||
|
||||
/* Print media */
|
||||
@media print {
|
||||
header,
|
||||
footer,
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
body,
|
||||
h1, h2, h3, h4, h5,
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user
