Drop #342 (2023-09-28): Standards, Resets, Patterns, And Colors

CSS Snapshot 2023; A (more) Modern CSS Reset; Patternify; The New [Color] Defaults

It's been a minute since we've cozied up with some CSS crunchy goodness, so we rectify that lapse, today. As I've been known to drone on about, we're all creators and HTML/CSS/JavaScript/(WASM) is the inescapable medium we are constrained to publish and work in. Keeping up with the foundational styling components of that ecosystem is something we all should do, at least a few times a year.

TL;DR

This is an AI-generated summary of today's Drop.

Perplexity was three for three (well, four for three), today, despite me forgetting to amend the prompt to tell it there were four sections.

• CSS Snapshot 2023: This section discusses the CSS Snapshot 2023 document, which collects all the specs that form the current state of Cascading Style Sheets (CSS) as of 2023. It highlights new features and improvements, such as container queries, dynamic viewport units, and trigonometric functions.

• A (more) Modern CSS Reset: This section covers Andy Bell's updated CSS reset, which provides a clean and consistent starting point for styling web pages across different browsers. It eliminates browser-specific default styles, allowing developers to have more control over the appearance of their web pages.

• Patternify and New Color Defaults: This section introduces Patternify, a simple pattern generator, and a lean color resource clrs.cc that provides modern color names for use in CSS. These tools can help enhance the visual appearance of web pages and make the design process more efficient.

---

CSS Snapshot 2023

Photo by Malcolm Lightbody on Unsplash

This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023.

Now, that link contains a pretty technical document collection set that is mostly geared towards folks who make CSS processing packages, libraries, tools, browser components, etc. So, you have every right to ask me: “why are you wasting my time with this?”.

Well, I'd first say that it will help you stay up-to-date with the latest CSS features and improvements, such as container queries, style queries, dynamic viewport units, wide-gamut color spaces, nesting, cascade layers, scoped styles, and trigonometric functions.

Because it focuses solely on the standards and not the unnatural things browser manufacturers did to their support (or lack thereof) for said standards, you get to see what's possible and use that knowledge to help lobby for better (or, any) support for those features.

If you'd rather focus on the browser side of things, the Chrome team has a pretty spiffy post that encapsulates the critical updates for 2023.

Since I like to go into technical documentation with some goals in mind, here are some questions you can keep in the back of your collective noggins whilst digging into them:

• How can container queries help create more responsive designs?

• What are the benefits of using cascade layers for managing complex style sheets?

• How can trigonometric functions be used in CSS to create advanced designs?

• What are the new color spaces and functions available in CSS, and how can they improve the visual appearance of web pages?

If you found an especially cool knowledge nugget, drop a note wherever you're comfortable.

A (more) Modern CSS Reset

“A (more) Modern CSS Reset” is a post by Andy Bell (creator of the original, popular CSS reset) that presents an updated version of his previous CSS reset.

A CSS reset, or reset stylesheet, is a collection of CSS rules used to clear the browser's default formatting of HTML elements, removing potential inconsistencies between different browsers. Each browser has different default settings for styling HTML elements, which can lead to inconsistencies in the appearance of a website across different browsers. A CSS reset aims to normalize the default styles and behaviors of HTML elements across different web browsers, providing a consistent baseline for developers to build upon. By using a CSS reset, developers can prevent themselves from unknowingly relying on browser default styling and be more explicit about the styling they want to apply on the page.

Bell has made several changes to the original reset to better suit modern web development practices and browser compatibility. The updated reset includes the following key features:

• it sets all elements and pseudo-elements to use the border-box instead of the default content-box .

• it disables text size adjustments in various browsers to prevent font size inflation.

• it removes default margins for better control in authored CSS.

• it removes default list styles on ul and ol elements with a list role.

• it sets default properties for the html and body elements, such as smooth scrolling behavior and a minimum height of 100vh.

Folks might want to use this CSS reset as a default because it provides a clean and consistent starting point for styling web pages across different browsers. It eliminates browser-specific default styles, allowing developers to have more control over the appearance of their web pages and reducing the need to deal with browser compatibility issues.

Having said that, some creators disagree with using CSS resets for several reasons:

• CSS resets remove default browser styles, which can lead to a loss of control over the appearance of certain elements. This may require additional effort to restyle these elements to achieve the desired look.

• Using a CSS reset can increase the file size of your stylesheets, which may lead to longer load times for your web pages.

• By removing default styles, CSS resets can make it more difficult to understand the intended design of generic page elements, such as headings, lists, and form elements.

• Relying on third-party CSS resets can introduce dependencies on external resources, which may not always be up-to-date or compatible with your project.

• CSS resets can sometimes conflict with existing styles, causing unexpected behavior or appearance issues.

Despite these concerns, many creators (including me) still find value in using CSS resets to establish a consistent baseline for styling across different browsers. The decision to use a CSS reset ultimately depends on your specific project requirements and personal preferences.

The reset code is short, so I'd definitely encourage a minor bit of experimenting with it to see if it is your cup of tea.

Patternify

Patternify is a simple pattern generator built by Sacha Greif (I'd 100% hit that link as they are pretty interesting and talented human). It was created it to save Sacha the pain of launching Photoshop just to export a 2px by 2px stripe pattern. Not only can you build your pattern online, but with the base64 code, you don't even need an image file anymore: just include the code in your CSS and you're ready to go!

While I am no artist, the section header is my sad attempt at a shield pattern. As the docs say, just draw your pattern on that same grid. You can use the cursors to limit the drawing surface and control the tiling. Once you're done, just download the PNG (make sure to rename it and add the “.png” extension at the end) or copy the code to your CSS. And you can also get a unique URL to share with other pattern aficionados.

It should make for a fun distraction during boring Zoom/Teams/Meet meetings.

The New [Color] Defaults

The default color names supported by browsers (think “blue”, “red”, navy”, etc.) are old, tired, just all sorts of blech. Many CSS frameworks come with color sets, but this near ten-year-old resource (GH) is super lean, and will work in any CSS context. I give it extra points for including how to use it in my fav CSS framework, Tachyons.

This is the core of the chosen colors (pictured in the section header):

.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.white { color: #FFFFFF; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }

but it includes tools to help you customize it.

You'll level up anything you create just by getting into the habit of using this.

FIN

So, what on your creative menu, today? ☮️