5 super useful CSS properties

#beginners #css #programming #tutorial

The isolation: isolate property in CSS

In this example, we have a container with a light blue background color and some padding. Inside the container, there is an inner element with a white background color and some padding. The isolation: isolate property is applied to the container, which creates a new stacking context for all its contents. This means that the inner element is isolated from the surrounding elements, and any z-index value applied to it will only affect elements inside the container.

Note that the isolation property is not supported in all browsers, so it's important to test your code thoroughly and consider providing fallbacks or alternative solutions if needed

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        isolation: isolate;
        background-color: lightblue;
        padding: 20px;
      }

      .inner {
        background-color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>This is some text inside a container.</p>
      <div class="inner">
        <p>This is some text inside an inner element.</p>
      </div>
    </div>
    <p>This is some text outside the container.</p>
  </body>
</html>

The inset property in CSS

In this example, the inset property is used to set the position of the .box element relative to its containing element. The four values specified for the inset property represent the top, right, bottom, and left edges of the box, respectively. In this case, the .box element is positioned 20px from the top, 30px from the right, 40px from the bottom, and 50px from the left.

Note that the position property must be set to absolute or fixed in order for the inset property to work. Additionally, the inset property is shorthand for the top, right, bottom, and left properties, so you can use those properties individually if you prefer.

<!DOCTYPE html>
<html>
  <head>
 <style>
.box-block {
  position: relative;
  background-color: lightblue;
  padding: 30px;
}
.box {
  position: absolute;
  inset: 30px 300px 40px 10px; /* top, right, bottom, left */
  background-color: red;
  color: white;
  padding: 30px;
}
</style>
  </head>
  <body>
    <div class="box-block"> 
<div class="box">Hello, World!</div>
  </div>
  </body>
</html>

The counter property in CSS

In this example, we use the counter-reset property to set the initial value of a counter named "my-counter" to 0. Then, we use the counter-increment property and the content property to display the current value of the counter before each list item. The counter function is used to retrieve the current value of the counter, and we append a period and a space to it using the CSS string concatenation operator, which is the dot (.).

When you view this HTML file in a browser, you should see a numbered list with each item numbered sequentially (1. First item, 2. Second item, 3. Third item). You can customize the appearance of the numbers by applying CSS styles to the li:before pseudo-element, such as changing the font size, color, or position. You can also use CSS counters to create more complex numbering schemes, such as nested lists or chapter headings.


<!DOCTYPE html>
<html>
  <head>
 <style>
<style>

.counter {
  margin-top: 40px;
}
ul {
 margin-top:90px;
 padding:0 20px;
}
li {
  list-style:none;
  margin:20px 0;
  paddin:0px;
}
body {
  counter-reset: my-counter;
}
li:before {
        counter-increment: my-counter;
        content: counter(my-counter) ") ";
}

</style>
</style>
  </head>
  <body>
   <!-- counter  -->
<div class="counter">
 <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
</div>
  </body>
</html>

The filter property in CSS

In this example, we use the sepia, contrast, brightness, and saturate filters to create a sepia-toned, high-contrast, slightly brighter, and more saturated version of the image. You can adjust the values of these filters to create different effects and experiment with other filter functions as well.

<img src="https://fastly.picsum.photos/id/264/536/354.jpg?hmac=Kw8G_8RzbNOCCkkTOSRjpvdK7rk1ApMcWlkJW7OuRVk" 
alt="My image"
>

<style>
img {
filter: sepia(50%) contrast(150%) brightness(90%) saturate(120%);
}
</style>

The contain property in CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        contain: layout;
      }

      .child {
        width: 50%;
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="child">
        <p>This is some content inside a child element.</p>
      </div>
    </div>
  </body>
</html>

In this example, we have a container element with the contain property set to layout. This means that the layout of the container and its contents is independent of the rest of the page layout, and any changes made inside the container will not affect elements outside it.

Inside the container, we have a child element with a specified width and height. Because the container has contain: layout, the child element's layout will not be affected by anything outside the container, including other elements or styles. This can improve rendering performance because the browser can optimize the layout and rendering of the container and its contents without considering other elements on the page.

Note that the contain property is not supported in all browsers, so it's important to test your code thoroughly and consider providing fallbacks or alternative solutions if needed. Also, the contain property has different values for different use cases, such as contain: paint for optimizing painting performance or contain: size for optimizing size calculations. Be sure to choose the appropriate value for your specific use case.

Support 🤗

YouTube
Website

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Top comments (7)

Jakob Carlsson • Feb 23 '23

Five interesting CSS things that I had no idea existed. I would have loved to see examples or a discussion about when to use each of them for the five. All we get now is a technical overview of five things in CSS but nothing about when they are usually used, for example mentioning that isolation gives it it's own stacking context but not giving an example about when that might be good to have.
But the one I was thinking most about is when it is good to use inset to position a child.