Categories
Allgemein

10 lesser known CSS tricks

Did you sometimes wonder, if there are more CSS things that you not know yet? Join me on a quick tour through 10 lesser-known CSS tricks that are about to become your secret weapons for leveling up your web design skills. Get ready to learn some new CSS tricks.

10 lesser known CSS tricks

Did you sometimes wonder, if there are more CSS things that you not know yet? Join me on a quick tour through 10 lesser-known CSS tricks that are about to become your secret weapons for leveling up your web design skills. Get ready to learn some new CSS tricks.

01. Smooth scrolling on your website

Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page.


  html{
    scroll-behavior: smooth;
  }

02. attribute selector for links

This selector targets links with href attributes starting with „https.“


  a[href^="https"]{
    color: blue;
  }

03. ~ for combining siblings

Selects all <p> elements that are siblings following an <h2>.


  h2 ~ p{
    color: blue;
  }

04. the :not() pseudo class

This selector applies styles to list items that do not have the class „special.“


    li:not(.special){
        font-stlye: italic;
    }

05. Viewport units for responsive typography

Using viewport units (vw, vh, vmin, vmax) can make font sizes responsive to the viewport size.


  h1{
    font-size: 5vw;
  }

06. :empty for empty elements 

This selector targets empty <p> elements and hides them.


  p:empty{
    display: none;
  }

07. Custom properties (variables)

You can define and use custom properties for easier
theming and maintenance.


  :root{
    --main-color: #3498db;
  }
  
  h1{
    color: var(--main-color);
  }

08. Object-fit property for image control

object-fit controls how the content of replaced elements (like <img>) should be resized.


  img{
    width: 100px; 
    height: 100px;
    object-fit: cover;
  }

09. Grid for simplified layouts

CSS Grid provides a powerful way to create layouts in a more straightforward manner.


 .container{
    display: grid;
    grid-tempalte-columns: 1fr 2fr 1fr;
 }

10. :focus-within pseudo class

The :focus-within selects an element if that element contains any children that have :focus.


 form:focus-within{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0, 0.2);
 }