Updates to @font-face
@font-face has been around for a while and it works fine for the existing monochrome, one file per style, fonts. CSS Fonts level 4 introduced a new property related to font types (tech()) to the src...
Adding fonts to theme.json for WordPress 6.x
Starting in WordPress 6.1 fonts can be fully defined in theme.json including adding variable fonts to the list of available fonts. The fontFace syntax in the theme.json file is very similar to what...
Populating a theme for testing
When you start a new site for developing the site has no data and there is no way to see what the theme would look like with content in it. We will discuss three approaches to populating a theme with...
Blocking Google from indexing your site
There are times when you don't want Google search to index specific pages on your site. It may be because these are private pages that, for some reason, are not password protected; or the site needs...
Using media queries in Javascript
Most of the time media queries in CSS will work fine for what we want to do but there are times when just having the media queries will not be enough. The first example that I can think of is doing...
CSS logical property shorthand attributes
CSS logical properties provide a way to style elements based on the direction the language is written in (left to right, right to left or top to bottom). Defining terms # To better understand logical...
What YouTube does with the videos
Uploading videos to YouTube in a given format doesn't mean that's the format that will play for all users. Most of the time we don't notice but YouTube will re-encode the video we upload into multiple...
Encoding video for YouTube and web delivery
When preparing a video for uploading to YouTube, it's tempting to go to the top of the line and choose to upload the biggest or the smallest file possible and see what YouTube does with it. If you're...
Toggles in CSS
Google is prototyping an unofficial CSS Toggles specification. The specification defines a way to associate a toggleable value with an element which developers can use to select an element and...
Creating custom buttons (2): Toggle Buttons
In a previous post, we discussed what it takes to create action buttons that execute a specific action. In this post, we'll discuss toggle buttons, a special type of button that changes based on the...