leininger.tech

Concatenating items in aria-labelledby

2024-04-19T00:00:00Z

I feel like I should have known this one, but it was news to me. Today I learned that you can concatenate values in an aria-labelledby attribute. I can only think of a few times where I would have really wanted to use this instead of just writing out the aria-label, but it's nice to have it in my back pocket. It's simple just add multiple IDs in the order you want them to be concatenated. Like this:

<article>
	<h2 id="wordle-heading">Wordle</h2>
	<p>Quick Description about Wordle</p>
	<p>
		<a href="https://www.nytimes.com/games/wordle/index.html" id="wordle-play" aria-labelledby="wordle-play wordle-heading">Play</a>
	</p>
</article>

See example on CodePen

By doing this, screen readers will announce something like link, Play Wordle instead of just link, Play and requiring someone to remember what card or item they are on.

Note: this works for aria-describedby as well.

When should I use `aria-label` or `aria-labelledby`?

Basically it comes down to two paths. It's a little more complicated than this but in general you should use:

aria-labelledby when the text is available some where else on the page
aria-label when the text doesn't exist on the page and you need to write something custom

Where to use :where()

2022-04-28T00:00:00Z

At first, when I saw :where(), I didn’t see how different it was from :is(), and I didn’t give it much of a second thought. To be fair, it is very similar. Just like :is(), :where() can take multiple arguments, and it won’t blow up if one of the arguments is invalid, as a standard list of selectors would. The critical difference is that :is() has the specificity of the most specific selector in its arguments, while :where() is always 0.

A Quick Overview of Specificity

A selector's specificity helps determine which styles should be applied when multiple selectors target a single element. The applied styles come from the most specific selector that contains each declaration. Each selector has its own specificity “score” determined by the contents of the selector: ids, classes, elements, etc... These scores are broken down into three levels:

ID selectors: These are IDs (#example)
Class selectors: These are classes (.example), attributes selectors ([type="radio"]) and pseudo-classes (:hover)
Type selectors: These are tags (h1, p, main) and pseudo-elements (::before)

Each level has its own “score” which looks like 0, 0, 0 for no specificity. The order of the specificity score is id, class, type. The "score" is a count of each selector type in a rule. For example, .header nav h1#sitetitle > .logo has a score of 1, 2, 2. A 1 in the ID Selector level won’t be able to be overridden by the other two types. It will need another ID to be more specific.

Back to :is() and :where()

Let’s take a look at how this specificity plays out for :is() and :where(). First let’s look at :is():

:is(.sidebar, footer, #feature) section a

Using :is() gives us a specificity of 1, 0, 2. Since :is() takes the specificity of the most specific argument, #feature ID gives us the 1 in the ID Selector level, and the trailing section a gives us the 2 in the Type Selector level.

Let’s compare that to the same example with :where():

:where(.sidebar, footer, #feature) section a

We get a specificity of 0, 0, 2 this time. This is where :where() shines and is different. The only part of this selector to score points is the section a selectors giving the Type Selector level a score of 2.

We can take it a step further and wrap that whole thing in a :where().

:where(:is(.sidebar, footer, #feature) section a)

The score here is 0, 0, 0 because everything is wrapped in a :where() pseudo class. The :is() value even gets set to 0. That means that :where() selectors are easier to override and work well in larger systems.

Take a look and try out different selectors at https://polypane.app/css-specificity-calculator/

How I use :where() in a Design System

For the past few weeks, I've been working on rebuilding and rethinking the development of the design system at WWT. Instead of waiting for us to rebuild a bunch of custom components, we decided that phase 1 should be a global CSS file — or set of files — as a baseline for all of our components. This can be imported into all current and future projects as we work towards making a set of components for each framework. We have many goals for this project, but one of the main ones is to make it easy to import and override as needed. That's where :where() comes in. Let’s take a look at some examples.

Example 1: Body Copy

At WWT, we build two main types of applications, content-driven websites and data-driven web apps with a lot of tables and data. These two types are best displayed with a different structure for handling typography and spacing. Content-driven websites are great candidates for fluid type and spacing, and data-driven apps are better candidates for static type and spacing.

/* specificity score: 0, 0, 1 */
body {
  font-size: 1rem;
  color: lightslategray;
}

/* specificity score: 0, 0, 1 */
body:where(.fluid) {
  font-size: clamp(1rem, calc(0.88rem + 0.51vw), 1.25rem);
}

It may not seem like a lot here, but dropping that extra specificity point is important. If a developer needs to update the color or change up the styles for their app, they don’t have to fight the specificity to make the change. We can give a branded baseline without causing headaches for the developers. Let’s dive in a little further.

/* specificity score: 0, 0, 1 */
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}

/* specificity score: 0, 0, 1 */
:where(.fluid) h1 {
  font-size: clamp(1.6rem, calc(0.9rem + 2.99vw), 3.05rem);
}
:where(.fluid) h2 {
  font-size: clamp(1.42rem, calc(0.93rem + 2.1vw), 2.44rem);
}
:where(.fluid) h3 {
  font-size: clamp(1.27rem, calc(0.93rem + 1.42vw), 1.95rem);
}

This is where things get a little bit more interesting. At first glance, you might say, “Sure, but I could just use the .fluid class before the tag selectors and it would be the same thing.” That isn’t entirely true. It would have the same effect on the base styles, but it would mean that every time the user wanted to override a size in their app, they would need to prefix that size with .fluid. It’s not major, but it would get annoying really quickly.

Here’s a look at why it’s important:

/* ----
	Design System Styles
---- */
/* specificity score: 0, 1, 1 -- no where pseudo-class */
.fluid h1 {
  font-size: clamp(1.6rem, calc(0.9rem + 2.99vw), 3.05rem);
}

/* specificity score: 0, 0, 1 */
:where(.fluid) h2 {
  font-size: clamp(1.42rem, calc(0.93rem + 2.1vw), 2.44rem);
}

/* ----
	In-App Styles - Lower in the cascade
---- */
/* specificity score: 0, 0, 1 this loses to .fluid h1 */
h1 {
  font-size: 4rem;
}
/* specificity score: 0, 0, 1 this overrides :where(.fluid) h2 */
h2 {
  font-size: 3rem;
}

Open example on CodePen

For WWT, using :where() in the design system styles is vital because it makes updating the “In-App” styles easier. There is no fighting code with a 0, 0, 0 specificity or the selector's default specificity.

Example 2: Link Styles

In my mind, we’re creating something that is like a WWT CSS reset, so I stole this selector from Andy Bell’s Modern Reset.

/* specificity score: 0, 1, 1 */
a:not([class]) {
  color: cornflowerblue;
}

This works, but I think we can do a little more with :where() for a reset. I’m not the only one who thinks using :where() makes a lot of sense in a reset. Take a look at Bramus’ conveniently named post Using the Specificity of :where() as a CSS Reset. Anywho, let’s look at the above example if we use :where().

/* specificity score: 0, 0, 1 */
a:where(:not([class])) {
  color: cornflowerblue;
}

Here is another example where dropping that extra specificity point is a big deal. If an app using this system needs to adjust the color or change up the styles for their app, they don’t have to fight the specificity like they would in the first example. Using :where() in this example means that a simple a selector will override the specified styles. For example:

/* ----
	Design System Styles
---- */
/* specificity score: 0, 0, 1 */
a:where(:not([class])) {
  color: cornflowerblue;
}

/* ----
	In-App Styles - Lower in the cascade
---- */
/* specificity score: 0, 0, 1 */
a {
  color: hotpink;
}

Open example on CodePen

Because the specificity scores are the same and the “In-App” styles are lower in the cascade, the “In-App” styles will be applied.

A link is a straightforward example, but this becomes more powerful when used throughout the whole system.

Conclusion

I love the idea of creating global styles that are extremely easy to override and change. I like it when I don’t have to fight the code I’m working on to make it do what I want, and :where() is starting to help with that.

There are many use cases for :where() like grouping and chaining, and I only scratched the surface here. Specifically, I like the patterns of :where(:not([class])) and :where(.class) tag. I think these patterns give us a lot of opportunities to create reusable systems that can are easy to modify.

Terminal: Previous Shortcut

2022-04-20T00:00:00Z

Being a front-end dev, I have some kind of relationship with the terminal. Sometimes, I have a desire to learn more and be a hacker, but most of the time what I know gets me by. That said, sometimes I find something that is so simple that it instantly becomes a part of my workflow.

That happened again today when Josh Comeau shared his post: The Front-End Developer's Guide to the Terminal. Like any good front-end dev, I ~~read the article~~ read all of Josh's articles. I don't know if I expected to pick anything up or just confirm I knew what I needed to know, but I didn't expect to grab this little nugget.

Previous Shortcut

So I'm in the terminal minding my own business in project-a, and I need to look at something in project-b, so I run cd ../project-b. Now I'm project-b and I need to get back to project-a. This time I run cd ../project-a. I could keep doing this or, I could use the previous working directory shortcut (no idea what it's actually called) like this cd -. This will take me back to the previous working directory. When I leave one directory for another, the one I left becomes the previous working directory. So, this gives you a type of toggle back and forth between directories.

It works in git, too!

This is where things get really spicy, you can use this to toggle between git branches! It's helpful to be able to swap between directories, but usually, I just have a terminal session up for both. Branches, on the other hand, I go back and forth all day. So, how does it work?

If you're in the main branch and you want to check out a feature/rad-thing then you'd run git checkout feature/rad-thing. Now that you're in feature/rad-thing, main is your previous branch. This means you can just run git checkout - to get back to main. If you have aliases set up for git then you can probably just run gco -. I am so pumped about this.

Thank you, Josh Comeau. You never disappoint.

Reordering Markdown Ordered List

2022-02-22T00:00:00Z

I've been making ordered lists in markdown for a long time. It's great to be able to use ordered lists just by writing the list out using numbers: 1. List item etc... Until recently, I've always hated reordering these lists and I'd default to unordered lists so I could reorder easier. That ends today.

With ordered lists in markdown, you can just use 1. for each item. This will start the list at 1 and go up from there, and when you reorder it you don't have to change each number. If they all start with 1. then it will just work.

1. List item number one
1. Another list item
1. This one is number three
1. You only need to do use 1

Result

List item number one
Another list item
This one is number three
You only need to do use 1

Specificity: Animation Declarations

2022-01-28T00:00:00Z

Specificity can be super confusing, and just when I think I have it really nailed down I learn something new. I'm not sure that I'm going to use this very often, but I didn't know that you can override style declarations with animation declarations. For example:

/* Animation declarations take precedence over normal declarations */
body {
  animation: bg 0s forwards;
}
@keyframes bg {
  to {
    background: yellow;
  }
}

/* This is overridden by the animation declaration above */
body {
  background: crimson;
}

In this example the background would be yellow because body has the animation declaration on it that overrides the crimson lower in the file eventough they have the same level of specificity.

Learn More

I picked up this wonderful bit of knowledge from Manuel Matuzović on his blog post about CSS Specificity. You should take a look at it, too.

SVG Overflow Visible

2021-12-23T00:00:00Z

I did not know that you can could set an SVG to overflow: visible;. I did not know that by default, SVGs were overflow: hidden;. I just thought that was how it worked. Only things inside the viewBox could be seen. More to come on this.

Active Element Console Live Expression

2021-11-12T00:00:00Z

Lately, I've been focusing more and more on accessibility. The past few weeks I attended Manuel Matuzović's accessibility testing workshop hosted by Smashing Magazine. I learned a lot of gems in that workshop, but the Active Element Live Expression stands out as one of the simplest and most helpful.

Note: As far as I'm aware, this only works in Chromium browsers.

I didn't even know that you could add Live Expressions to the Console. Live Expressions run every time something changes in the browsers, and checking the active element (what is focused) is perfect for this!

Set Up

Open the console (cmd + option + j on a mac)
Click on the eye icon
Add document.activeElement in the expression field

That's all there is to it

Now every time your focus updates, this field will tell you what element has the current focus. This trick is a winner. Give it a try.

Search Element in Inspector

2021-11-05T00:00:00Z

The search inside of the Elements tab in the inspector isn't very helpful if you're trying to find specific tags. There is a really simple solution for this, use * tag.

For example, if you're searching for an h2, use the search term * h2. This will pull find all of the elements instead of finding random h2 text in styles or svgs.

Reverse Ordered List

2021-10-25T00:00:00Z

So I've got this whole lists section of the site where I list all of my opinions about things like the best sodas, broadway shows, pizzas in STL, and wives. Spoiler alert the last one is only one item.

Fast forward to Halloween, and I realized that I needed to add a new list, a list of our family Halloween Costumes. This list needed to be grouped by year and starting from the most recent year and going down.

So there's the problem: an ordered list, that starts as the "current" year, and counts down.

First Attempt: Reversed Attribute

The first attempt was probably the simpliest. Ordered lists have a few properties that allow you to change their interactions.

<ol reversed start="2021">
  <li>Star Wars Portmanteaus</li>
  <li>Jurassic Park</li>
  <li>The Magic School Bus</li>
  <li>Rubber Ducky</li>
  <li>Lobster Fishermen</li>
  <li>Dairy Queen and Burger King</li>
  <li>Brawny Man and Paper Towels</li>
</ol>

Result

Star Wars Portmanteaus
Jurassic Park
The Magic School Bus
Rubber Ducky
Lobster Fishermen
Dairy Queen and Burger King
Brawny Man and Paper Towels

This works, and if all I wanted was a list it would be ideal. That said, for a few reasons, it's not exactly the end goal for me. First while this does give you good clean semantic markup, it doesn't give you much of a chance to style the list items, and that's just happens to be what I did on the /lists page. So we press on.

Second Attempt: Set the Value in the List Item

Setting the value inside the <li> would work in this case, but it has the same issue with being unstyled. Not to mention then I have to keep all of those numbers up-to-date. I'm not looking to put each year in 15 years. I think we can do better, because that's a lot to manage:

<ol>
  <li value="2021">Star Wars Portmanteaus</li>
  <li value="2020">Jurassic Park</li>
  <li value="2019">The Magic School Bus</li>
  <li value="2018">Rubber Ducky</li>
  <li value="2017">Lobster Fishermen</li>
  <li value="2016">Dairy Queen and Burger King</li>
  <li value="2015">Brawny Man and Paper Towels</li>
</ol>

Result

Star Wars Portmanteaus
Jurassic Park
The Magic School Bus
Rubber Ducky
Lobster Fishermen
Dairy Queen and Burger King
Brawny Man and Paper Towels

Third Attempt: Using a Custom Counter

Now we're talking, styling those ::markers like a boss. This is a little more complicated, but getting those sweet styled lists make designers happy - in this case, I'm the designer.

In this case, since we normally want the lists to count up, we still want to add the reversed attribute so we know to count down in this circumstance. In order to keep the starting point dynamic, we also need to set the counter-reset directly on the ol.

Note: the starting point for the counter-reset needs to be 1 number lower than the starting number if the list is ascending and 1 number higher if the list is descending. The counter-increment runs on each list item.

<ol reversed style="counter-reset: list_counter 2022;">
  <li>Star Wars Portmanteaus</li>
  <li>Jurassic Park</li>
  <li>The Magic School Bus</li>
  <li>Rubber Ducky</li>
  <li>Lobster Fishermen</li>
  <li>Dairy Queen and Burger King</li>
  <li>Brawny Man and Paper Towels</li>
</ol>

ol {
  list-style: none;
  counter-reset: list_counter;
}
ol li {
  align-items: baseline;
  display: flex;
  counter-increment: list_counter;
}
ol[reversed] li {
  counter-increment: list_counter -1;
}
ol li::before {
  content: counter(list_counter);
  color: var(--accent);
  font-family: theme('fontFamily.mono');
  font-variant-numeric: tabular-nums;
  margin-right: 1.5rem;
}

Result

Star Wars Portmanteaus
Jurassic Park
The Magic School Bus
Rubber Ducky
Lobster Fishermen
Dairy Queen and Burger King
Brawny Man and Paper Towels

There we go. A reversed list with custom styles that should work from any starting point. I'm pretty happy with where we ended.

Helpful Sources

CSS Tricks: How to Reverse CSS Custom Counters
Manuel Matuzovic: Reverse Ordered Lists

No Shadow Screenshot

2021-08-10T00:00:00Z

You know what really grinds my gears? When you take a screenshot on a Mac, hit the space bar for the whole app, and the dang screenshot comes with a shadow. I didn't want the app with its shadow, I just wanted the app window. I've known for a long time that you could just hold the option key and it would remove the shadow. If only there was a way to make it so none of my screenshots had shadows...

Well, guess what? There is. Here's how. Open your terminal and put in this command:

defaults write com.apple.screencapture disable-shadow -bool true ; killall SystemUIServer

Voilà! Take your screenshots without shadows like God meant them to be.

Fast Click

2021-06-18T00:00:00Z

By default, when tapping on an element, browsers wait 300ms for a potential double-tap to zoom.

This can be sped up with a single css declaration:

touch-action: manipulation;

It would be great for links and buttons:

a, button {
  touch-action: manipulation;
}

Using this declaration, browser immediately responds to taps instead of waiting 300ms for a "potential" second tap. This is great for buttons and links.

Support

Basically All

Scaling Text in Figma

2020-11-16T00:00:00Z

I have been angry at Figma for a while not for not allowing me to scale type and the bouding box at the same time. This is one of those moments where I was angry thinking they didn't have a solution instead of looking. One quick google on the google machine later, and k is my new best friend.

k allows you to scale the selected items including fonts. This for me is nice because I can scale to a point that I think works, and then adjust it to my type scape. Figma, thank you for being awesome.

Note: don't forget to turn off scale by pressing v, otherwise you'll scale things you don't mean to. The cursor isn't too obviously different.

Netlify Functions Query Params

2020-11-14T00:00:00Z

To access query parameters in your Netlify Functions, you can access the event.queryStringParameters object available inside the handler function.

For example if you have an email query string, you can access it using

exports.handler = (event, context, callback) => {
  event.queryStringParameters.email
  //do something with it
}

Tailwind PostCSS Config Flag

2020-09-28T00:00:00Z

If you use -p when initializing Tailwind for your project it will generate a PostCSS config file at the same time.

# creates both a tailwind.config.js and postcss.config.js
npx tailwindcss init -p

Emulate Focused page

2020-09-15T00:00:00Z

Ever tried debugging an element that keeps disappearing when it loses focus once you start using devtools?

Emulate a focused page - you can get it from the [⌘]+[P] Command Menu, or Global Preferences

Empty Selector

2020-09-10T00:00:00Z

Use the :empty {} selector to hide empty paragraphs (often created by users within content management systems)

p:empty {
  display: none;
}

Grayscale Accessibilty Test

2020-09-08T00:00:00Z

It’s important that color is not used as the only visual means of conveying information.

Add this class to your CSS to switch to grayscale mode and check if your user interface is still comprehensible and visual elements distinguishable.

.a11y-grayscale {
  filter: grayscale(100%) !important;
}

<html class="a11y-gray" lang="en" />
...
</html>

Input Autocomplete

2020-09-07T00:00:00Z

Autofill inputs using security codes sent by SMS!

<input autocomplete="one-time-code" />

Support

Working on iOS!

Input Mode

2020-08-21T00:00:00Z

Help users by giving them the correct keyboard to use on touch screen devices.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

<!-- No virtual keyboard. For when the page
implements its own keyboard input control. -->
<input inputmode="none" />

<!-- Standard input keyboard for the user's current locale. -->
<input inputmode="text" />

<!-- Fractional numeric input keyboard containing
the digits and decimal separator for the user's locale -->
<input inputmode="decimal" />

<!-- Numeric input keyboard, but only requires the
digits 0–9. Devices may or may not show a minus key. -->
<input inputmode="numeric" />

<!-- A telephone keypad input, including the digits 0–9,
the asterisk (*), and the pound (#) key. Inputs that
require a telephone number should typically use
<input type="tel">instead. -->
<input inputmode="tel" />

<!-- A virtual keyboard optimized for search input.
For instance, the return/submit key may be labeled
“Search”. Inputs that require a search query should
typically use <input type="search"> instead. -->
<input inputmode="search" />

<!-- A virtual keyboard optimized for entering email
addresses. Typically includes the @ character as well as
other optimizations. Inputs that require email addresses
should typically use <input type="email"> instead. -->
<input inputmode="email" />

<!-- A keypad optimized for entering URLs. This
may have the / key more prominent, for example.
Enhanced features could include history access
and so on. Inputs that require a URL should
typically use <input type="url"> instead. -->
<input inputmode="url" />

Fix Bold on Hover Styles

2020-07-28T00:00:00Z

Add a hidden pseudo element with the same text string but set it to the bold font size

example: https://codepen.io/hexagoncircle/pen/WNrYPLo

.menu.fix .menu-link::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: var(--bold);

  @media speech {
    display: none;
  }
}

Event Listener - Once True

2020-07-24T00:00:00Z

You can add the option { once: true } to an event listener to automatically remove it when has been invoked.

example: https://codepen.io/matuzo/pen/wvMOpXp?editors=1010

document.querySelector('.always').addEventListener('click', () => {
  alert('always')
});

// after this fires it's removed from the dom
document.querySelector('.once').addEventListener('click', () => {
  alert('once')
}, {
  once: true
});

Background Repeat Round

2020-06-23T00:00:00Z

Background repeat round and space repeat background images without clipping the images.

Pro Tip: It really helps if your images are square, round stretches in both directions.

background-repeat: round;
background-repeat: space;

See the Pen Background Repeat Options by David Leininger (@davidleininger) on CodePen.

Lint HTML in CSS

2020-06-20T00:00:00Z

Linting HTML with CSS is a great tool to help find problematic markup.

Empty Links

This selector hunts for links that have:

no href
an empty href
a "#" href (button perhaps?)

a:is(:not([href]), [href=""], [href="#"]) {
  outline: 2px dotted red;
}

Missing Alt Text

Highlight images missing alt text with:

img:not([alt]) {
  outline: 2px dotted red;
}

IE 11 Only Styles

2020-06-15T00:00:00Z

IE10 and IE11 specific style media query.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
  /* IE10+ CSS styles go here... */
}

Inset 0

2020-05-19T00:00:00Z

The "inset" logical property gem is shorthand for all the sides of your box.

This sets all sides to 0, snapping each corner to the corner of it's parent.

.full {
  position: absolute;
  inset: 0;
}

Support

Pretty green

Hover Media Quesries

2020-04-21T00:00:00Z

Style if mobile
Style if desktop
Style if stylus
Style if controller
Combine together

// laptop/desktop styles
@media (hover: hover) {}

// smartphones/touchscreens
@media (hover: none) and (pointer: coarse) {}

// device with stylus
@media (hover: none) and (pointer: fine) {}

// Wii/Kinect/etc
@media (hover: hover) and (pointer: coarse) {}

// mouse/touchpad
@media (hover: hover) and (pointer: fine) {}

Support

Pretty Darn Good

Scroll Margins

2020-04-13T00:00:00Z

Prevent anchor links from scrolling behind a sticky header.

#anchor {
	scroll-margin-top: 1em;
}

Support

The scroll-margin-top property works in all modern browsers, but has no IE support.

Counter

2020-04-02T00:00:00Z

CSS has built-in operators to count the number of elements rendered.

ol {
  /* Give our counter a name, any name will do */
  counter-reset: ordered-list;
}

ol li {
  /* Indicate that we should increment the count
     for every list item */
  counter-increment: counts;
  list-style: none;
}

ol li:before {
  /* Use the count in the :before pseudoelement */
  content: counter(counts) '. ';
  display: inline-block;
  color: deeppink;
  font-family: 'Pacifico', cursive;
  width: 32px;
}

Support

All

Placeholder Shown

2020-03-30T00:00:00Z

Change the input style and apperance if the the placeholder is visible.

:placeholder-shown

input {
  // styles
}
input:placeholder-shown {
  // specific styles if placeholder is shown
}

Support

Great - Partial IE

Attribute Selectors

2020-01-30T00:00:00Z

It's always funny when people say to me, "I hate CSS." Sometimes I ask why, but most of the time I just move on disgusted. CSS is fun and I love learning more and more and more about it. I think one of the reasons people don't CSS is because there is so much to it, and so much nuance. It's similar to the english language: there, they're, their.

One example of that nuance is Attribute Selectors. While pretty much everyone know you and use classes .item, ids #logo, and tags div, not everyone knows there are other ways to select elements. Attribute selectors allow you to select an item if it has a certain attribute or that that attribute has a certain value. Attribute selectors can give you a special treatment if a linke has target="_blank" to let a user know they are leaving your site. They can change a style if the file name you're linking to ends in .pdf.

Attribute selectors are very powerful, and I often forget about them So here are the things I've learned and found in different places, put together, and referenced so I'd have a simple place to come back to. Because really this "blog" is for me anyways.

Eight different types of CSS attribute selectors

/* This attribute exists on the element */
[value] { }

/* This attribute has a specific value of cool */
[value='cool'] { }

/* This attribute value contains the word cool somewhere in it */
[value*='cool'] { }

/* This attribute value contains the word cool in a space-separated list */
[value~='cool'] { }

/* This attribute value starts with the word cool */
[value^='cool'] { }

/* This attribute value starts with cool in a dash-separated list */
[value|='cool'] { }

/* This attribute value ends with the word cool */
[value$='cool'] { }

/* This does not have an attribute with the value of cool */
:not([value='cool']) { }

The above code is sniped from Emma Bostian's gist.

Multiple Selectors

One thing to note is that these attribute selectors can be chained to be more specific or require more matches.

/* This attribute has a specific value of cool and a name of david */
[value='cool'][name='david'] { }

Case-Insensitve Attribute Selectors

By default, the strings inside attribute selectors are case sensitive. Simply adding i to the end of the attribute selector will allow you to select the strings regardless of case. That seems super helpful in a large group project.

/* Will match
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

The above code is sniped from CSS Tricks.

Specificity (spec·i·fic·i·ty)

Attribute selectors are the same weight in specificity as a class. Specificity seems complicated, but it's pretty simple when you see it broken down. There are three different levels of specificity: id, classes, tags. It's important to note that these are separate values and aren't numbers. This means that using 10 classes does not equal 1 id, and 11 classes isn't more specific than an id.

Looking at an example using this understand: #page a.link[href$='.pdf'] would equate to 1, 2, 1. It does not equal 121, but rather three distinct levels, where each level has it's own specificity. For example #page.home a.link[href$='.pdf'] would equate to 1, 3, 1 and be more specific than #page a.link[href$='.pdf'].

And there you have it, Attribute Selectors. They are are super powerful and super under utilized. I'm hoping to use them more in my work.

Place Content

2020-01-22T00:00:00Z

Simplify flexbox positioning with using one property instead of two.

.item {
  display: flex;
  place-content: center;
}

It's also works with grid.

.item {
  display: grid;
  place-content: center;
}

Support

Not IE

Truncate Multi-line Text

2019-09-20T00:00:00Z

This exact set of properties now actually works to do multiple-line truncation in a fairly well supported way.

.box p {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* # of lines to truncate */
  -webkit-box-orientation: vertical;
  overflow: hidden;
}

Overscroll Contain

2019-09-20T00:00:00Z

Disable parent scrolling when child container (like sidebar) reaches scroll end.

.child {
  overscroll-behavior: contain;
}

Save Snippets in Dev Tools

2019-01-14T00:00:00Z

You can save JavaScript snippets in Chrome Dev Tools for future use.

https://www.youtube.com/watch?v=N4zO_E2xt94