The hottest Substack posts of Perspectiv | LAB

And their main takeaways

Using :has() pseudo-class to style parent elements

2 HN points • 21 Jul 24
🕹 Technology Web Development CSS Accessibility Design Patterns
  1. The :has() pseudo-class in CSS lets you style a parent element based on its child elements. This means you can change how a parent looks if it has kids that meet certain criteria.
  2. One practical use is to display error messages more clearly. You can make a parent element look different, like changing colors, when there's an error message inside it.
  3. This technique also helps with accessibility. You can use it to highlight parent elements for users who may need visual signals, based on child elements with special attributes.

Using calc() to create responsive typography

1 HN point • 22 Jul 24
🕹 Technology Web Design CSS User Experience
  1. The `calc()` function in CSS helps you do math for styling, making it easier to set font sizes for different screens.
  2. By using something like `font-size: calc(1.5rem + 1vw)`, the text size grows with the screen size, creating a more adaptable design.
  3. You can also use `calc()` to set limits on font size, ensuring your text doesn't get too big or too small on any device.

Scrollbar with a bit of CSS easily

0 implied HN points • 20 Jul 24
🕹 Technology Web Development CSS Design User Experience Programming
  1. You can easily customize scrollbars using CSS with pseudo-elements. This lets you change the size and color to match your site's design.
  2. Using different pseudo-elements, you can style the scrollbar, track, and thumb for a more appealing look. Each part can have its own styles and hover effects.
  3. These custom scrollbar styles mainly work in WebKit browsers like Safari, so you might need other methods for broader browser support.