CSS: Features you should know.

CSS is very crucial to web development, it's what gives any website its good looks. The markup language is responsible for the fact that websites have a good-looking layout, and that every element stays where it should. There are so many features of CSS that are released timely. CSS is capable of a wide range of functionality that javascript was initially needed for. This article assumes you're familiar with CSS and would like to be informed about its features.

What are these features?

CSS custom properties: These are entities defined by CSS authors which contain specific values to be used over again throughout a document. They are set using custom property notation (e.g. —main-color: green;) and are accessed or retrieved using the var() function (e.g., color: var(—main-color);).

When working with a larger document, complex websites have large amounts of CSS, and the values are repeated often. For example, you may want to use the same color for a font in a couple of different places. To make things easier, in order not to cause any form of confusion we use CSS custom properties.

Example: To declare a custom property, you must use a custom property name that begins with a double hyphen (—), and a property value that can be any valid CSS value. This is written inside a ruleset; Note: The best practice is to define custom properties on the :root pseudo-class. The root allows us to set properties at the root level of our project so that it is available globally. root:{ —primary-color: blue; —secondary-color:orange; —main-bg-color: green; —font-stack:“robot”, Helvetica; }

For instance, in our markup, we have the body tag and we would like to give it a color and font family. Normally we would write it like so;

body{ color:red; font-family: “robot”, helvetica; }

but using custom property, we would write it like so; body{ color: var(—primary-color); font-family: var(—font-stack); }

Note: you can reassign the value because it follows the rule of cascading style; body{ —primary-color: red; // by doing this the primary color becomes red. color: var(—primary-color); font-family: var(—font-stack); }

You can set a fallback value by writing a defensive style. If the primary color wasn't defined, for instance, we can always right a fallback style which is separated by a comma(,). body{ color: var(—primary-color, green); // green is the fallback style. }

CSS @Supports Feature Detection Some CSS features may not be supported by all the browsers because of how often they come up. We can use the @Support for testing CSS feature availability inside of a browser within CSS. If the browser supports custom properties, the CSS will be executed if not, it will not be executed. Example: We can test for support of custom CSS properties or CSS variables by; @support(—foo:blue){ body{ color:var(—varName); } }

We do feature detection using @support to see if browsers support custom properties.

We can also test for regular CSS properties

@support(test-align-last: justify){ p { text-align-last: justify; }

}

The CSS property is not supported in every browser, if the browser supports it, it will use it. it will only be applied to browsers that support the property.

If the browser doesn't support it we use;

@support not(text-align-last:justify){ p { text-align:justify; } }

This is a fallback to say if it is not supported by the browser, use the regular text-align: justify; @support will take a look at your browser and test its CSS features. You can apply rules and fallbacks to things that are not supported.

Content-Visibility Content visibility is a CSS feature that improves page rendering performance. It is similar to lazy loading, it's not for images or videos only, but any HTML element. In other words, You can use it to keep any part of your site from loading until it becomes visible. To use content visibility you must consider which content you want to load, and which content you want to delay or put off to load later. The property also has an auto option that lets the browser decide if it can skip the rendering of an element. There are three keyword values, these are visible, hidden, and auto which is written like so; content-visibility: auto; //elements outside of the visible area will be skipped and then rendered once they appear on screen.

content-visibility: hidden; //element is not rendered.

content-visibility: visible; //element loads as usual.

When elements are set to content-visibility: hidden; they become zero in size, contain-intrinsic-size lets you apply a height and width to hidden elements so that the browser can take them into consideration from the beginning instead of at the point when the element is rendered. This way, your layout will not change suddenly when scrolling. section { content-visibility: auto; contain-intrinsic-size: 0 500px; } Note: This feature is supported by a few browsers, for more information you can check out https://developer.mozilla.org/enUS/docs/Web/CSS/content-visibility

:is and :where Pseudo Classes

The :where() CSS pseudo-class function takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list, :is() takes on the specificity of the most specific selector in its arguments. :is() and :where() are both pseudo-class functions used to shorten and stop repetition in creating your selectors. They are a more organized way of writing group-based selectors.

Example of how to use :where and :is : Instead of this; .btn span > a:hover, .header span > a:hover, #footer span > a:hover { color:red; } Do this; :where(.btn, .header, #footer) span > a:hover { color:red; }

:is(.btn, .header, #footer) span > a:hover { color:red; }

They both look identical, but their difference is, they have different specificities. :where() is simple and always has a specificity of 0 while :is() has the specificity of the strongest and specific selector.

Note: Because of specificity hierarchy in CSS, Whichever selector has the highest number will have their styles applied to that element. An example is an id(#) and class(.) If you're familiar with CSS, you should already know that an id(#) is higher than a class(.) whatever you apply on a class, if you do the same using an id, the id(#) will override the class(.)

There are so many features and updates and believe me it's not ending anytime soon. These features are just to educate and inform you that there are so many things you can do in CSS and it's somewhat limitless. You can always check out the docs for more information.