I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG defined

The CSS border-image property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstrates different approaches for using border-image to create clever decorative accents and shapes.

Used for overlay images
https://www.youtube.com/watch?v=opHu7HvFM60

CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.

When users increase their text size, they're not trying to make the space around text bigger.

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div {
  overflow: hidden;
  position: relative;

  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

This article is all about experimenting with modern CSS features. We will combine things like CSS masks, CSS variables, trigonometric functions, @property, and more to create a neat hover effect that would have been extremely difficult to do even a few years ago without the latest and greatest that CSS has to offer.

A list of different options for compiling CSS with Eleventy

David Darnes came at me with a classic RTFM. Turns out Eleventy has a page on the docs for doing exactly this. This method uses Sass and requires a little bit of config. One thing to note is by default this will output all .scss file to the built site, so I added a check to see if the file is named app and if it's not, then skip it. Alternatively you can put your files in an _includes directory and these won't be output (thanks Dave). style: 'compressed' will minimise the CSS.

Stephanie Eckles has an Eleventy plugin for using LightningCSS which handles all the configuration and as a bonus ignores any files that start with _ so they won't get copied to the build folder.

.foo, #bar {
  .baz { /* ... */ }
}

produces the selector .foo .baz, #bar .baz in Sass but :is(.foo, #bar)) .baz in native CSS. This changes the specificity: :is() always has the specificity of its most specific selector,

Sass nesting and native CSS nesting both support syntax that looks like &foo, but it means different things.

Custom Properties have the potential to change how we write and think about CSS.

In most cases, I'd now consider it code smell if a media query or CSS selector swaps one variable for another. Rather than swapping variables it's better to define one variable, set its initial value and change it with a selector or media query.

Responsive designs being created today have to serve more users on more devices and with more varied abilities and preferences than ever before. And size and spacing of elements can quite literally make or break your layout. In this new world, strict pixel values are so Web 2.0. Let’s review modern CSS techniques for building future-forward flexibility into our layouts and components.

Correction in the thumbnail: This video was shot on April 2023

• It's not HTML5 or CSS3 - it's just 'html' and 'css'!
• https://developer.mozilla.org/en-US/docs/Web/HTML - Good documentation but not the spec!
• https://html.spec.whatwg.org/
• Content model - What is legal to nest
• Transparent: a > h1 is ok, but p > a > h1 not ok!
• https://caninclude.glitch.me/
• preload preconnect prefetch prerender for links
• Get your head straight: https://www.youtube.com/watch?v=UW1PEMBdX5E
• <header><main><footer> are important!
• Subheading <hgroup><h1><p> - Not <hgroup><h1><h2>
• Upgrade Your HTML (4 books)
• <menu> - like <ul>
• script - defer async type="module" nomodule
• <template id="mytable"> - Don't have to put html in javascript
• JavaScript is expensive, HTML is almost free!

A three-way color contrast checker for when you remove underlines from links.

https://chipcullen.com/the-contrast-triangle/

In order for your text and links to be accessible, they both need to have sufficient contrast from the background, as well as from each other. This creates a three-way design constraint.

I think the biggest bang for your buck is to learn OKLCH (or, “Oklachroma”)

• It’s based on human perception
• It can define any color
• the chroma value is a number between 0 and 0.37

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

A deep dive into CSS masking

border-radius: 100vmax;

.full-width {
box-shadow: 0 0 0 100vmax var( --color );
clip-path: inset( 0 -100vmax );
}

The hsl() and hsla() functions also have 0% usage in the data, and they have just as good of support as the hex codes. Why? HSL can do anything HEX can do, except it’s far more readable and easier to adjust. It’s just better, really.

CSS has a lot of pretty rad and powerful features for managing image rendering these days. Let’s leverage some of these, like aspect-ratio, object-fit, and object-position for when we need to use a single image in many different contexts.

A collection of popular layouts and patterns made with CSS

When an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick.