• Flex children are just that: display: block or display: inline don't have any affect once display: flex is defined on the parent.

• Flexbox is controlled inside --> out: The size of the children affect the size of the parent. Grid is outside --> in: the size of the parent is specified and the children fit inside.

• Defaults: flexbox by default uses the 'best' size for the children. It doesn't expand them, but it will shrink them if necessary.
  flex-shrink: 1;
  flex-grow: 0;

• If you have multiple rows and columns, and you want them consistent, grid is the better choice

• width is the same as flex-basis IF you are using columns

At work, one of the things I do pretty often is write print generators in HTML to recreate and replace forms that the company has traditionally done handwritten on paper or in Excel. This allows the company to move into new web-based tools where the form is autofilled by URL parameters from our database, while getting the same physical output everyone's familiar with.

This article explains some of the CSS basics that control how your webpages look when printed, and a couple of tips and tricks I've learned that might help you out.

Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility.

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.