Skip to main content
CSS is fun and cool and I like it.
Article

Responsive Styling Using Attribute Selectors

One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. We can prefix each breakpoint. This works well until we start adding multiple classes. That’s when it becomes difficult to keep a track what relates to what and where to add, remove. or change stuff.
Article

SVG, Favicons, and All the Fun Things We Can Do With Them

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks.

One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way.… Read article “SVG, Favicons, and All the Fun Things We Can Do With Them”

Link

Solving Sticky Hover States with @media (hover: hover)

Article

Let’s Not Forget About Container Queries

Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually trying to control a more scoped container, and the only reason we use media queries for that now is because it’s the best tool we have in CSS. I absolutely believe that. … Read article “Let’s Not Forget About Container Queries”

Article

Can you nest @media and @support queries?

Yes, you can, and it doesn’t really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

This works:

@supports(--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

And so does this, the reverse nesting of the above:

@media (min-width: 1px) {
  @supports(--a: b) {
    body {
      background: green;
    }
  }
}
Read article “Can you nest @media and @support queries?”
Link

A responsive grid layout with no media queries

Article

Look Ma, No Media Queries! Responsive Layouts Using CSS Grid

Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing “hacky” techniques we’ve used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What’s so cool about this era in web development is that we’re capable of doing more and more with fewer lines of code.

In this article, we’ll start dipping our toes into … Read article “Look Ma, No Media Queries! Responsive Layouts Using CSS Grid”

Article

Where Do You Nest Your Sass Breakpoints?

I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this:

.element {
  display: grid;
  grid-template-columns: 100px 1fr;
  @include breakpoint(baby-bear) {
    display: block;
  }
}

That’s straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I’m never quite sure which one I should be doing.… Read article “Where Do You Nest Your Sass Breakpoints?”

Article

Dark Mode in CSS

With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query. Safari Technology Preview 71 also has supported-color-schemes, which… well, I couldn’t exactly tell you what that does.

The media query is like this:

@media (prefers-color-scheme: dark) {

}

It may not be supported everywhere just yet, but it’s a great progressive enhancement, it’s implemented … Read article “Dark Mode in CSS”

Link

How to create a logo that responds to its own aspect ratio