Forem: Joe Attardi

Beyond breakpoints: Leveraging user preference media queries in CSS

Joe Attardi — Fri, 25 Oct 2024 14:42:11 +0000

If you build web sites or apps, chances are you work with media queries. These handy CSS tools allow you to adjust your layout depending on the size of the device. They are a key part of responsive design.

You can query based on the width of the device, its aspect ratio, orientation, and more. These all allow you to fine-tune your layout for the device being used.

You might not know that there are other media queries available that let you tailor your site or app based on the user's preferences rather than their device size and orientation.

User preference media queries

There are several media queries that deal with user preferences. You can use these to fine tune your app's experience for the user.

Automatic dark mode with `prefers-color-scheme`

Dark mode is everywhere these days. It seems like every site now has the sun/moon toggle button to switch between light mode and dark mode. You can take this one step further and use the prefers-color-scheme media query to automatically determine if the user's device is using a light or dark color mode.

Here's how it works: Define your CSS styles for light mode like you normally would. Then add the media query prefers-color-scheme: dark. In there, add CSS rules overriding your light mode colors:

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

Tip: Create themes with CSS variables

To make life a little easier, you can define all your colors in a theme, a set of CSS variables. Then inside your prefers-color-scheme: dark block, you only need to redefine the variables instead of re-adding your CSS selectors and rules:

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

Tone down animations with `prefers-reduced-motion`

Animations can enhance your app's experience, but animations may be difficult for users with vision or vestibular problems. To assist these users, some devices and operating systems have an option in the user preferences to reduce motion.

You can use the prefers-reduced-motion media query to detect when such an option is enabled for the user's device. You can then use alternate animations that are less intense (or turn them off altogether).

Here's an example of using prefers-reduced-motion to turn off an animation.

.content {
  animation: my-awesome-animation 250ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .content {
    animation: none;
  }
}

One thing to note: If you turn off animations like this, make sure you don't have any code that relies on an animationend event. When you set animation to none, as shown above, this event will never be fired.

Keep in mind that you don't have to turn off animations when prefers-reduced-motion: reduce matches! Suppose you have a fancy reveal animation where the element bounces into view. When the user wants reduced motion, you could change this so it's a simple fade-in animation.

Adaptive contrast with `prefers-contrast`

Some users with vision difficulties may have increased contrast enabled on their device. You can handle such situations with the prefers-contrast media query.

If this media query matches, you can adjust your contrast to make things easier to see for these users.

.box {
  border: 1px solid gray;
}

@media (prefers-contrast: more) {
  .box {
    /* Make the border stand out more against the background */
    border: 2px solid black;
  }
}

Checking media queries with JavaScript

Suppose you're animating with JavaScript - for example, maybe you're using the Web Animations API. Since these animations aren't defined in the CSS, you can't turn them off with the prefers-reduced-motion media query.

Or can you?

Yes! You can use the window.matchMedia method to evaluate a media query from JavaScript. The media query is passed as an argument, and the method returns something called a MediaQueryList.

This object has a matches property, which is a boolean indicating whether or not this media query currently matches. Based on the value, you can decide whether or not to animate.

Here's a simple example showing how window.matchMedia can be used to conditionally call animate on a DOM element:

// Check to see if we should animate
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
if (!query.matches) {
  someElement.animate(...);
}

Reacting to changes

A MediaQueryList even has a change event which fires if conditions change and the media query no longer applies.

Suppose you have some JavaScript code that you only want to run for large displays. If the user's screen size is small, you want to skip this code. You can do this by calling window.matchMedia using a max-width query or something similar.

Suppose that later, the user resizes the window, and now you want to run the large screen specific JavaScript code. Just listen for the MediaQueryList's change event, and you can check the event's matches property to see what the new value is.

Summary

These media queries can help you to better personalize your user's experience within your website or app. You can automatically apply a dark color scheme, and even fine-tune your animations and contrast depending on user preferences. They also help with accessibility, which is always a win.

It's still in an experimental stage, but you can also keep an eye out for the prefers-reduced-data query which will indicate whether the user's device has a requirement that is uses less data. This can be used to provide alternate content that uses less data. For example, you could skip non-essential images (or use lower-resolution versions).

Using git bisect, the detective tool for debugging

Joe Attardi — Fri, 04 Oct 2024 03:19:15 +0000

Youre working on a bug fix and find some bad code that causes a bug. The git blame command will tell you who the last developer was that modified that line, and when they modified it. But what if you dont know what code introduced the bug? For these situations, the git bisect command can help.

To use git bisect, youll need to find a commit where the bug exists (a bad commit), and youll also need to find an older commit where the bug doesnt exist (a good commit).

Once you identify these two commits, git bisect will guide you through a binary search of the commit history.

This can save you considerable time if there are a lot of commits between the bad commit and the good commit. At each step of the binary search, you perform a test to see if the bug exists. If the bug exists at this commit, you tell git bisect that this is a bad commit. If the bug doesnt exist, you indicate that its a good commit.

Depending on whether the commit is bad or good, git bisect picks another middle point between the commit you identified and the bad commit. The process continues until Git has identified the first bad commit which introduced the bug.

Example bisect

Lets walk through a short git bisect and see a visualization of each step.

First, to start the process, run git bisect start:

% git bisect start
status: waiting for both good and bad commits

Make sure you've checked out a commit or branch that exhibits the bug you're investigating, and run git bisect bad:

% git bisect bad
status: waiting for good commit(s), bad commit known

Next, you'll need to check out a known good commit and run git bisect good:

% git checkout <commit ID>
% git bisect good
Bisecting: X revisions left to test after this (roughly Y steps)

At this point, you've identified a good commit and a bad commit, and Git is pointing to a commit in the middle for you to check.

Run or test your code, and see if the bug exists here. If you can't reproduce the bug, mark this as a good commit by running git bisect good. Now Git knows that the commits between the first good commit and this one are all good:

Now, Git will continue the binary search. It will pick the commit in the middle between the good and bad commits, and check it out for you to check:

Suppose that here, you are able to reproduce the bug. Mark this as a bad commit by running git bisect bad. Git will mark this commit as bad:

It will pick the next commit between the good and bad commits, and continue binary searching:

Let's assume that this is a good commit, and you can't reproduce the bug. Just as you did before, run git bisect good to mark this as a good commit:

At this point, Git has enough information to tell you the first bad commit.

Now you can look at the changes from that commit and, hopefully, determine what change caused the bug.

When you're done, run git bisect reset to exit bisect mode and return to the commit you were at when you started bisecting.

Mixing up good and bad commits

git bisect can only work if the good commit is an ancestor of a bad commit. If you mark a commit as good, then check out an earlier commit and mark it as bad, you'll get an error:

Some good revs are not ancestors of the bad rev.
git bisect cannot work properly in this case.
Maybe you mistook good and bad revs?

Automating `git bisect`

It might be tedious to manually test your code at each step of a git bisect, but you might be able to automate it. You can use git bisect run and give it the name of a script or other command to run. Git will check the exit code of the command at each step.

If the exit code is 0, it's treated as a good commit. If you want the commit to be treated as a bad commit, your command should have an exit code between 1 and 127. However, there is one exception to this. Git reserves the exit code 125 to have a special meaning. If, for some reason, this commit cant be tested, your command can return an exit code of 125 and it will skip that commit.

Summary

The git bisect command can help you quickly narrow down which commit introduced a bug or other undesirable behavior. It does this by performing a binary search on the commit history between a known good commit and a known bad commit.

If you have automated tests, you can even use git bisect run to automatically control the process of testing and identifying good and bad commits.

Steps for installing a local AI copilot in Visual Studio Code

Joe Attardi — Thu, 12 Sep 2024 20:12:07 +0000

Does your company block ChatGPT or GitHub Copilot? Do you have security or trust concerns sending your code to a third party AI service? You might not know this, but you can run a large language model (LLM) locally on your computer, and even integrate it with Visual Studio Code.

Using the Ollama tool, you can download and run models locally. In this post, Ill guide you through the steps to run the Code Llama model using Ollama, and integrate it into Visual Studio Code.

Code Llama is an LLM from Meta that is focused on generating and talking about code. Its based on their Llama 2 model, and supports many different languages.

Installing Ollama and the Code Llama model

Your first step is to install Ollama. Go over to https://ollama.com where you can download and install it. Once Ollama is up and running, you should have a new terminal command, ollama. To see if its installed correctly, open a terminal and run:

ollama -v

This should print the Ollama version. If you see this, then youre good to go! Next, download the Code Llama model by running this command:

ollama pull codellama

This may take a while, depending on your Internet connection. The 7b version of Code Llama is 3.8 gigabytes. Go get a cup of coffee, tea, or your favorite beverage while Ollama downloads this model.

Setting up CodeGPT

CodeGPT has a Visual Studio Code extension where you can interact with models directly in the editor. In VS Code, go to the Extensions tab and search for codegpt. Youll see several results, make sure to get the one with the blue check mark:

Once CodeGPT is installed, you should see a new CodeGPT icon in the editors sidebar. When you click on this, youll be taken to the CodeGPT interface. Click the dropdown menu at the top of this panel and select Ollama as the provider, and codellama as the model:

Once youre up and running, you will see a text area at the bottom of this panel to start chatting. Try entering a prompt such as Generate the code for a simple React component.

Code Llama will start processing your request. Keep in mind that running a model locally is not as powerful, or fast, as an online service like Meta AI or ChatGPT. After a few seconds, you should have a result in the chat window.

Setting up completion

You can also use CodeGPT to suggest code completion, like GitHub Copilot and similar tools do. To set this up, in the CodeGPT Chat window, click the Menu button at the top left part of the screen. A menu will slide out with several options.

Select Autocomplete to set up code completion.

Code Llama has a code variation that you can use for code completion. It is a separate model, so youll have to make another large download. Select the codellama:code model from the AI Model dropdown:

Next, make sure to click the toggle switch to enable completion:

Now, as you type in your editor, Code Llama will make suggestions for you. For example, here it is filling in the PropTypes for a Greeter component:

If you like a suggestion, you can press the Tab key to accept it:

Have fun!

Thats really all there is to it. You now have AI chat and code completion integrated in Visual Studio Code!

]]>

New book: Web API Cookbook

Joe Attardi — Wed, 03 Apr 2024 20:50:48 +0000

Announcing my new book from O'Reilly Media, Web API Cookbook!

It's now available from Amazon and O'Reilly

The book contains examples or "recipes" demonstrating how to accomplish specific tasks using only the APIs built in to modern web browsers.

Many things that once required third-party JavaScript libraries or browser plugins are now supported by the browser platform itself.

The book covers topics such as:

Working with persisted data and local files
Internationalization
Speech synthesis and recognition
Communciating with APIs and real-time data
Reacting to changes in the DOM
Custom elements
Reading device information and sensors
Performance statistics
The Web Animations API

Understanding color contrast for accessibility

Joe Attardi — Fri, 06 Oct 2023 14:43:31 +0000

Accessibility is a popular topic these days - as it should be. There are many benefits of making your application accessible - it promotes inclusivity by making your app usable by everyone.

There are many aspects of accessibility that you need to keep in mind, one of which is color contrast. Proper color contrast not only looks good, but it's critical for users with low vision.

Specifically, you need to make sure that there is enough contrast between your background color and text color. If the contrast is too low, the text is not easily distinguishable from the background and it's hard to read. Even for users without disabilities, this is problematic as it can lead to eye strain.

The Web Content Accessibility Guidelines (WCAG) provides some guidance on contrast ratios.

What is a contrast ratio?

The term "contrast ratio" refers to the difference, or ratio, in brightness between the background and text colors.

The WCAG guidelines formally define the contrast ratio as:

(L1 + 0.05) / (L2 + 0.05), where

L1 is the relative luminance of the lighter of the colors, and

L2 is the relative luminance of the darker of the colors.

How much contrast is enough?

The contrast ratios required by WCAG differ slightly depending on the size of the text.

Large text

Large text size is defined as follows:

For bold text, 14 points or larger
For non-bold text, 18 points or larger

Large text has a more relaxed contrast requirement since larger text is easier to read. For large text, the minimum contrast ratio is 3:1. This minimum is known as Level AA.

There is also a notion of enhanced contrast, known as Level AAA. For large text, AAA requires a minimum ratio of 4.5:1.

Normal text

Since smaller text is not as easy to read, it has stricter contrast requirements.

For Level AA, text must have a minimum contrast ratio of 4.5:1. The enhanced Level AAA contrast is a minimum of 7:1.

Non-text elements

Non-text elements, such as icons, have a minimum contrast ratio of 3:1 for Level AA.

Level AAA does not define a minimum contrast for non-text elements.

The following table summarizes the different minimum contrast ratios:

	Large text	Normal text	Non-text
AA	3:1	4.5:1	3:1
AAA	4.5:1	7:1

Checking contrast

The easiest way to check your color contrast is to use a tool. WebAIM has an excellent [Contrast Checker](https://webaim.org/resources/contrastchecker/). You can enter your foreground and background colors, and it will show you if the contrast meets AA and AAA standards.

The Chrome developer tools will also show the contrast ratio when inspecting an element:

Visualizing contrast

Here are a few examples of different color contrast ratios. Screenshots are courtesy of the WebAIM Contrast Checker.

1.4:1 (does not meet minimum standard):

4.51:1 (meets level AA standard):

7:1 (meets level AAA standard):

Conclusion

Using sufficient color contrast is good for everyone, but critical for accessibility. Of course, color alone is not enough to make an accessible experience. For other resources to make your UI accessible, check out:

WCAG 2 Overview [w3.org]
WebAIM [webaim.org]

Understanding error handling in Promise chains

Joe Attardi — Wed, 13 Sep 2023 00:10:02 +0000

Promise chains

You can create a chain of Promises by returning new Promises from a then handler. Here's a simple example that chains 3 promises together:

Promise.resolve(1)
    .then(id => {
        console.log(`Success: ${id}`);
        return Promise.resolve(2);
    }).then(id => {
        console.log(`Success: ${id}`);
        return Promise.resolve(3);
    }).then(id => {
        console.log(`Success: ${id}. Done!`);
    });

The output of this chain will be:

Success: 1
Success: 2
Success: 3. Done!

To handle any errors that may occur in the chain, you can add a call to catch at the end of the chain. If any of the Promises are rejected, this catch handler will run, and the rest of the chain is skipped.

Promise.resolve(1)
    .then(id => {
        console.log(`Success: ${id}`);
        return Promise.reject(2);
    }).then(id => {
        console.log(`Success: ${id}`);
        return Promise.resolve(3);
    }).then(id => {
        console.log(`Success: ${id}. Done!`);
    }).catch(id => {
        console.log(`Error: ${id}`);
    });

The output of this chain will be:

Success: 1
Error: 2

The weird parts

If you add more then calls after the catch, they will run!

Promise.resolve(1)
    .then(id => {
        console.log(`Success: ${id}`);
        return Promise.reject(2);
    }).then(id => {
        console.log(`Success: ${id}`);
        return Promise.resolve(3);
    }).then(id => {
        console.log(`Success: ${id}. Done!`);
    }).catch(id => {
        console.log(`Error: ${id}`);
    }).then(() => {
        console.log('Another then!');
    });

You'll get this output:

Success: 1
Error: 2
Another then!

Why does the chain continue after the catch? As it turns out, you can return another Promise from a catch handler. Here, the catch handler just prints to the console. The handler function, then, returns undefined. This actually returns a new Promise, fulfilled with the value undefined. You can verify this by adding the id argument to the last then:

Promise.resolve(1)
    .then(id => {
        console.log(`Success: ${id}`);
        return Promise.reject(2);
    }).then(id => {
        console.log(`Success: ${id}`);
        return Promise.resolve(3);
    }).then(id => {
        console.log(`Success: ${id}. Done!`);
    }).catch(id => {
        console.log(`Error: ${id}`);
    }).then(id => {
        console.log(`Success: ${id}`);
    });

And the output:

Success: 1
Error: 2
Success: undefined

Re-rejecting

This is a contrived scenario, but consider a function that does some asynchronous work and returns a Promise. Maybe it's a function that wraps the Fetch API, to return the JSON content. It has a catch for centralized request error logging:

function getJSON(url) {
    return fetch(url)
        .then(response => response.json())
        .catch(error => console.log('Fetch error:', error));
}

What happens if there's an error with the Fetch call? Before reading this post, the result might surprise you!

getJSON('http://invalid.fake')
    .then(data => console.log('Success!', data))
    .catch(() => console.log('Error!'));

Logically you might expect that Error! will be printed. But what actually happens is that getJSON logs the Fetch error but returns a fulfilled Promise. Your then handler will be executed and print:

Success! undefined

In order to get the result you want, the catch handler inside getJSON has to return a rejected Promise. You have to "re-reject" it:

function getJSON(url) {
    return fetch(url)
        .then(response => response.json())
        .catch(error => {
            console.log('Fetch error:', error);
            return Promise.reject(error);
        });
}

You could also throw the error, which will implicitly return a rejected Promise as well:

function getJSON(url) {
    return fetch(url)
        .then(response => response.json())
        .catch(error => {
            console.log('Fetch error:', error);
            throw error;
        });
}

Either way, now when you call getJSON and an error occurs, it will correctly return a rejected Promise.

Summary

Promise chains actually work a lot like try/catch blocks in JavaScript. If an exception is thrown within a try block, it jumps right to the catch block and skips the rest of the try - just like how catch() skips the rest of the Promise chain.

Also, if you have a function that catches an exception, you'll need to re-throw it if you want it to propagate back up to the calling function.

Using the HTML `picture` element to show a WebP image

Joe Attardi — Mon, 03 Aug 2020 11:09:38 +0000

The WebP image format has been around since 2010 when the standard was first announced. One benefit of using WebP images is that they are smaller than both JPEGs and PNGs, sometimes significantly.

WebP is supported in almost all modern browsers, as can be seen here. However, it currently is not supported in Safari and IE11. So we can't use a standard <img> element, as the image will not display in these browsers.

Luckily there is a solution with the HTML <picture> element. This is a very powerful and flexible element that lets you define multiple sources for an image.

First, convert your image to WebP. There are several easy online converters that can do this. Next, use a <picture> element:

<picture>
  <source type="image/webp" srcSet="/my-image.webp" />
  <img src="/my-image.jpg" />
</picture>

The last child of a <picture> element is a fallback <img> element. This will be used if the browser does not support WebP. This also allows the image to be shown on browsers that do not support the <picture> element.

Speaking of browser support, it's pretty decent. All modern browsers (Edge, Firefox, Chrome, and Safari) support <picture>. It's not supported in IE11, but the fallback <img> element will be used instead.

Vanilla JavaScript emoji picker! New and improved.

Joe Attardi — Thu, 23 Jul 2020 16:55:02 +0000

Emoji Button is a vanilla JavaScript emoji picker component I have been working on over the past year or so. Because it's just plain JavaScript, it can be made to work with any framework, site, or app.

Version 4 has just been released, with performance improvements and some new features, including:

Custom emojis
UI plugins
More UI customization
Fuzzy search

Free and open source, MIT licensed. Hope someone out there finds it useful!

Details, documentation, and demos can be found at https://emoji-button.js.org/.

Code can be found at https://github.com/joeattardi/emoji-button.

New book: Modern CSS

Joe Attardi — Tue, 26 May 2020 13:28:21 +0000

I am excited to announce that my new book, Modern CSS, is now available!

The book is targeted at beginners and experienced developers who might not be up to date on the latest CSS topics like flexbox and grid.

The topics covered include:

box model
specificity
selectors
units
colors
inline vs block elements
backgrounds
gradients
shadows
borders
text and fonts
layout
positioning
transforms
transitions
animations
floats
responsive design
Flexbox
CSS Grid

For more information on the book, including a full table of contents and sample chapter, you can go to https://moderncss.info.

Thanks for looking!

Let's make a CSS cube

Joe Attardi — Wed, 13 May 2020 17:06:59 +0000

You can do a lot with CSS transforms! In this post we'll walk through making a 3D cube.

First, let's create the markup:

<div class="container">
  <div class="cube">
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
    <div class="face left">Left</div>
    <div class="face right">Right</div>
    <div class="face front">Front</div>
    <div class="face back">Back</div>
  </div>
</div>

Each face of the cube is its own div element. Let's create some initial styles:

.container {
  width: 200px;
  height: 200px;
  perspective: 500px;
  margin: 100px;
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}

.face {
  width: 200px;
  height: 200px;
  background: skyblue;
  border: 2px solid black;
  position: absolute;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
}

We've given some styling to the cube faces and absolutely positioned them so they are all sitting on top of one another. First, we will rotate each face so that it's facing the proper direction. The next step will be to move each face out from the center to the edges of the cube.

Here is what we have so far:

We are currently looking at the cube head-on. It will be easier to visualize if we rotate our "camera" a bit. Let's add a rotate3d transform to the cube:

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 0, 45deg);
}

Now the elements are rotated at an angle, so we can see the 3D structure better:

Let's tackle the front first. Our cube is 200px by 200px by 200px. Currently all the elements are in the dead center of the cube. The front is already facing the right direction, we just need to move it out by 100px so that it is at the front edge. Let's add a new rule for the front and move it out:

.front {
  transform: translateZ(100px);
}

Now the front face of the cube is in place:

Next is the back. It is already in the proper plane, but we need to rotate it 180 degrees around the y-axis so that the text is facing outwards. Like the front, we also need to move it out by 100px:

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

The back face is now in the proper position:

Let's do the left and right next. These need to be rotated 90 degrees around the y-axis so that they are both facing outwards on each side. The left side needs to be rotated by -90 degrees.

Then they need to be moved along the x-axis to the edges of the cube:

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

Lastly, we need to position the top and bottom. These need to be rotated 90 degrees around the x-axis so that they are facing up and down. Again, the top will need a rotation of 90 degrees and the bottom -90 degrees, so that the text direction is correct.

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

Looks like a cube!

To show off our new cube, let's give it a turning animation:

@keyframes turn {
  from { transform: rotate3d(0, 0, 0, 0); }
  to { transform: rotate3d(1, 1, 0, 360deg); }
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: turn 5s linear infinite;
}

Lastly, we want to be mindful of accessibility. If the user has disabled animations in their operating system, let's not animate the cube but rather display it at the 45 degree angle we had before:

@media (prefers-reduced-motion: reduce) {
  .cube {
    animation: none;
    transform: rotate3d(1, 1, 0, 45deg);
  }
}

Here is the finished product in a CodePen:

Did you like this post? Learn more CSS in my upcoming book, Modern CSS!

CSS fundamentals: Selectors

Joe Attardi — Sun, 03 May 2020 18:06:33 +0000

One of the core concepts in CSS is that of selectors. A selector determines which element(s) a CSS rule applies to. There are several ways an element can be targeted with a selector.

CSS selectors can target multiple elements on the page. That is, a single CSS rule can apply to multiple elements. An element or class selector can select multiple different elements that have that class or element name.

Similarly, a single HTML element can be affected by multiple CSS rules.

Basic selector types

The universal selector

The universal selector, specified simply as an asterisk (*), matches all elements. This can be specified as a single selector, to select all elements in the document, or in combination with combinators (discussed below).

Element selectors

An element selector targets an HTML element by its element or tag name. The syntax of the selector is simply the name of the element.

p {
  margin: 25px;
}

In this example, all p elements on the page will have a margin of 25 pixels applied to them.

ID selectors

An HTML element can have an id attribute. As a general rule, there should only be one element with a given id. If there are multiple elements with the same id, only one of them will be targeted with an ID selector.

An ID selector is specified with the # character followed by the id value:

#header {
  padding: 25px;
}

The above selector will target the element with an id of header and give it a padding of 25 pixels.

<div id="header">...</div>

In general, the use of ID selectors should be avoided. Due to their tight coupling to a specific HTML element, they are not reusable. The CSSLint tool has a good explanation as to why you should avoid ID selectors, which can be read in full here: https://github.com/CSSLint/csslint/wiki/Disallow-ids-in-selectors

The explanation reads, in part:

For years, developers have treated IDs as the way to say "that thing!" However, IDs have a downside: they are completely unique and therefore cannot be reused. You could potentially style every element on your page with an ID selector but you would lose a lot of the benefit of CSS in the process.

One of CSS's benefits is the ability to reuse style rules in multiple places. When you start out with an ID selector, you're automatically limiting that style to a single element.

Class selectors

While only a single element can be targeted by an ID selector, any number of HTML elements can have the same class attribute. A class selector will match every element in the document with the given class. Class selectors are specified with a dot, followed by the name of the class.

.nav-link {
  color: darkcyan;
}

This rule will match every element with a class of nav-link and give it a color of darkcyan.

Attribute selectors

HTML elements can also be selected by their attribute values, or by the presence of an attribute. The attribute is specified inside square brackets, and the attribute selector can take several forms.

[attributeName]
Selects all elements that have the given attribute, regardless of its value.

[attributeName="value"]
Selects all elements that have the given attribute, whose value is the string value.

[attributeName*="value"]
Selects all elements that have the given attribute, whose value contains the string value.

[attributeName~="value"]
Selects all elements that have the given attribute, whose value contains the string value separated by whitespace.

[attributeName^="value"]
Selects all elements that have the given attribute, whose value begins with value.

[attributeName$="value"]
Selects all elements that have the given attribute, whose value ends with value.

Combining selectors

Any of the above selectors (with the exception of the universal selector) can be used alone or in conjunction with other selectors to make the selector more specific. This is best illustrated with some examples:

div.my-class
Matches all div elements with a class of my-class.

span.class-one.class-two
Matches all span elements with a class of both class-one and class-two.

a.nav-link[href*="example.com"]
Matches all a elements with a class of nav-link that have an href attribute that contains the string example.com.

A rule can also have multiple selectors separated by a comma:

.class-one, .class-two
Matches all elements with a class of class-one as well as all elements with a class of class-two.

Selector combinators

There's even more you can do with selectors. Combinators are used to select more specific elements. Combinators are used in conjunction with the basic selectors discussed above. For a given rule, multiple basic selectors can be used, joined by a combinator.

Descendant combinator

The descendant combinator matches an element that is a descendant of the element on the left hand side. Descendant means that the element exists somewhere within the child hierarchy - it does not have to be a direct child.

The descendant combinator is specified with a space character.

.header div
Matches all div elements that are direct or indirect children of an element with a class of header. If any of these divs have children that are also divs, those divs will also be matched by the selector.

Child combinator

The child combinator matches an element that is a direct child of the element on the left hand side. It is specified with a > character.

.header > div
Matches all div elements that are direct children of an element with a class of header. If those divs have children that are also divs, those divs will not be matched by the selector.

General sibling combinator

The general sibling combinator matches an element that is a sibling, but not necessarily an immediate sibling, of the element on the left hand side. It is specified with a ~ character.

Consider the following HTML:

<div>
  <div class="header"></div>
  <div class="body"></div>
  <div class="footer"></div>
</div>

The following selector would select both of the divs, with the class body or footer:

.header ~ div

Adjacent sibling combinator

The adjacent sibling combinator is similar to the general sibling combinator, except it only matches elements that are an immediate sibling. It is specified with a + character.

Looking again at the above HTML structure, the following selector would only select the div with the class body:

.header + div

Combining combinators

These combinators can be combined to form even more specific selectors, for example:

div.header > div + button

This selector matches a button element that is an immediate sibling of a div element, which in turn is an immediate child of a div with the class header.

Pseudo-classes

Another tool in the CSS selector toolbox is the pseudo-class. A pseudo-class allows you to select elements based on some special state of the element, in addition to all the selectors discussed above.

Some pseudo-classes let you select elements based on UI state, while others let you select elements based on their position in the document (with more precision than the combinators).

There are many pseudo-classes, but here are some of the more commonly used ones.

UI state

:hover
Matches an element that the mouse cursor is currently hovering over. This is typically used for buttons and links, but can be applied to any type of element.

:active
Matches an element that is currently being activated. For buttons and links, this usually means the mouse button has been pressed, but not yet released.

:visited
Matches a link whose URL has already been visited by the user.

:focus
Matches an element that currently has the focus. This is typically used for buttons, links, and text fields.

Document structure

:first-child
Matches an element that is the first child of its parent. Consider the following example HTML:

<ul class="my-list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

The selector .my-list > li:first-child will match the first list item only.

:last-child
Matches an element that is the last child of its parent. In the above example, the selector .my-list > li:last-child will match the last list item only.

:nth-child()
Matches an element that is the nth child of its parent. The value of n is passed as a parameter to the pseudo-class. The index of the first child is 1. Going back to the example HTML above, we can also select "Item two" with the selector .my-list > li:nth-child(2).

This pseudo-class can even select children at a certain interval. For example, in a longer list, we could select every other list item with the selector .my-list > li:nth-child(2n). Or, we could select every four items with the selector .my-list > li:nth-child(4n). We can even select all odd-numbered children with the selector .my-list > li:nth-child(odd).

A complete list of pseudo-classes, including some that are still experimental, can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.

Thanks for reading, I hope you found this useful, whether you're a CSS beginner or just someone looking for a refresher!

Shiny button hover effect with CSS

Joe Attardi — Wed, 29 Apr 2020 17:00:17 +0000

This one is based on a shiny button I added to the navigation on my portfolio site.

It's done by having an ::after pseudo element, which is a rotated rectangle, quickly zoom across over the button.

Forem: Joe Attardi

Beyond breakpoints: Leveraging user preference media queries in CSS

User preference media queries

Automatic dark mode with prefers-color-scheme

Tip: Create themes with CSS variables

Tone down animations with prefers-reduced-motion

Adaptive contrast with prefers-contrast

Checking media queries with JavaScript

Reacting to changes

Summary

Using git bisect, the detective tool for debugging

Example bisect

Mixing up good and bad commits

Automating git bisect

Summary

Steps for installing a local AI copilot in Visual Studio Code

Installing Ollama and the Code Llama model

Setting up CodeGPT

Setting up completion

Have fun!

New book: Web API Cookbook

Understanding color contrast for accessibility

What is a contrast ratio?

How much contrast is enough?

Large text

Normal text

Non-text elements

Checking contrast

Visualizing contrast

Conclusion

Understanding error handling in Promise chains

Promise chains

The weird parts

Re-rejecting

Summary

Using the HTML `picture` element to show a WebP image

Vanilla JavaScript emoji picker! New and improved.

New book: Modern CSS

Let's make a CSS cube

CSS fundamentals: Selectors

Basic selector types

The universal selector

Element selectors

ID selectors

Class selectors

Attribute selectors

Combining selectors

Selector combinators

Descendant combinator

Child combinator

General sibling combinator

Adjacent sibling combinator

Combining combinators

Pseudo-classes

UI state

Document structure

Shiny button hover effect with CSS

Automatic dark mode with `prefers-color-scheme`

Tone down animations with `prefers-reduced-motion`

Adaptive contrast with `prefers-contrast`

Automating `git bisect`