UI Development

Useful css facets seldom used

We all know that CSS is the basis for any kind of styling framework like Bootstrap, Foundation, Pure, Bulma and so on, which make our webpage styling easy. Nevertheless, working with plain CSS files without using frameworks is always preferred as it makes us understand each and every rule we’ve written thereby enhancing our overall comprehension of the webpages we build.
Even though we are pretty sure about our knowledge of CSS, there may be some features that we might find new or seldom used. The following features may not work in all browsers, so before putting them into use, make sure you test them.

With that being said, let’s take a look at some of the lesser-used yet effective features of CSS.


    We know that a numbered list can be achieved using an ordered list in CSS. Numbering can also be done with counters in CSS. They are nothing but variables whose values can be incremented using CSS rules. There are four properties which should be combined with counters to use them:

    counters() or counter function – To add the value of a counter to an element.

    counter-increment – to increments the value of a counter.

    content -To insert content generated.

    counter-reset – to create or insert a counter.


    body {
      counter-reset: section;
    h3 {
      counter-reset: subsection;
    h3::before {
      counter-increment: section;
      content: "Section " counter(section) ". ";
    p::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) " ";




    The font-size-adjust property is used to control the font-size of the second specified font. The font-size-adjust property uses aspect value,i.e, the differences between the uppercase and lowercase letters.

    The browser uses the second specified font when a particular font is not available and the size of the second specified font can be handled using the font-size adjust property.


    p {
      font-size-adjust: 0.5;
      font-size: 15px;
      font-family: Persnickety, ’Times New Roman’,serif;




    Using variables we can manage color, templates properties and also dynamic themes. We should use the body selector or : root for a variable’s declaration for global scope and within a CSS selector that defines its scope.

    The variable name is case sensitive and should start with two dashes(–).


    :root {
      --section-bgcolor: #deb887;
      --section-font: bold;
    .section {
      background-color: var(--section-bgcolor);
      font-weight: bold;
      margin: 10px;
      padding: 10px;


    The filter function can be used to enhance thematic and visual effects to images.The properties for filter function are:

    invert(),grayscale(),contrast(),hue-rotate(),none,blur(),brightness(),drop-shadow(),saturate() ,sepia(),url(),opacity().


    img {
      filter: grayscale(60%);



    To bundle CSS declarations, a feature query called ‘@supports’ can be used wherein they’ll execute under some conditions as a group.A feature query can be used when we want to apply a combination of new and old CSS. This property works only when the browser supports new CSS.

    The code written inside @supports will execute only when the property declared inside @supports is supported by the browser.


    @supports (display: grid) {
      /* code inside this block executes only when the browser supports grid system.*/



    The font-display property describes the way in which font files are loaded, displayed by the browser. It has five values:

    fallback-Instructs the browser hide the text and to use the fallback text, if the font has not been downloaded within 100ms. It will swap(within 3 sec) to the new font downloaded.

    optional-It is similar to fallback. Additionally, it also provides the browser to determine the usage of custom font based on the user’s connection speed.

    auto- It allows the default method for loading to the browser.

    block-It’s also called as “flash of invisible text”,i.e, instructing the browser to hide the text until the font has been fully downloaded.

    swap-It’s also called as “flash of unstyled text”,i.e, instructing the browser to use the fallback font to display text until the font has been fully downloaded.


    @font-face {
        font-weight: 400;
        font-style: normal;
        font-family: CustomFont;
        src: url('customfont.woff2') format('woff');
        font-display: optional;



    By using contain property, we can limit paint recalculation and style scoping to not the entire page but only to a limited area of the DOM.It thereby improves the overall performance of the webpage.

    This property has many values such as:  style,size,none,strict,paint,none,layout.


    This property determines how the lines of text should be laid, either vertically or horizontally. It has the following values:

    vertical-rl-content flows vertically from top to bottom fashion and horizontally from right to left fashion.

    horizontal-tb-content flows horizontally from left to right fashion, vertically from top to bottom fashion.

    vertical-lr-content flows vertically from top to bottom fashion and horizontally from left to right fashion.


    .horizontal {
      writing-mode: horizontal-tb;
    .vertical {
      writing-mode: vertical-lr;




    This property primarily enhances and optimizes animations by making the browser understand what elements and properties are about to be modified thereby boosting the performance of the task.

    It has four values:



    .parent:hover {
      will-change: transform;
    .child:hover {
      transform: opacity 0.2 ease-in-out;



About The Author