7 Things You don’t know About CSS

commas-left

Knowing CSS and HTML is must for front-end developers.

However, there are many hidden things that some of developers don’t know about CSS.

commas-right

CSS

We cannot find CSS a complex language, however, every time, we have been writing CSS, we probably have many new things to do.

There is no doubt every front end developer knows HTML and CSS. However, as a beginner, you have to keep yourself update with latest features/standards of web programming languages.

In this post, we have gathered some hidden things about CSS that every developer must know, whether he/she would be beginner or experienced.

CSS @supports

Before using any features, every good front-end developers do feature-tests that may browser may not have.

JavaScript is used for feature testing always and Modernizr, an impressive utility packed with loads of well-tested routines

Feature testing has always done with JavaScript, and many people use Modernizr, an impressive utility packed with loads of well-tested routines, to do that feature testing.

With the help of A new API, one can easily do feature tests with CSS: @supports. Below given are some samples of how @supports works:

/* basic usage */
@supports(prop:value) {
	/* more styles */
}

/* real usage */
@supports (display: flex) {
	div { display: flex; }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}

This new @supports comes with a JavaScript counterpart is an outstanding to use.

What’s Difference In IDs and Classes? When To Use It

Many times, the basic elements in HTML won’t meet the styling requirements and thus, developers have to be more specific when styling them.

Thus, we can add them Classes (e.g. <div class=”inner-content”></div>) or IDs (e.g. <div> id=”navigation”></div>).

Hashtags (e.g.#navigation{property:value;}) are used by the ID selectors in CSS and dots (e.g. .inner-content{property:value;}) are used by the Class selectors before their names.

Let’s check the difference between them

If we are considering the priority lever of selectors for the elements that use Classes and IDs (e.g. <div id=”first-page” class=”inner-content”></div>) the Class’s properties will be override by the ID’s properties.

Importantly, IDs may be used for targeting one element on a single page while in case of Classes, you may use multiple times to target multiple elements on a single page, else you will get HTML validation errors.

Multiple Images Background

Multiple Images Background feature is available with CSS3 that comes a good cross-browsing support and work like a stack:

  • The first image is on top which is visible
  • The second one is below first and
  • The third below the second and so on.

One can have a simple syntax that can be separated with commas like:

background: url(image1.png) center no-repeat, url(image2.png) center no-repeat, url(image3.png) center no-repeat;

CSS3 Animations

If you don’t want to use Java or Flash, then CSS3 Animations is the best alternative for animating elements and also recommenced method that can be done with CSS.

Moreover, it enables to change an element style into another, as many times you want to. Some keyframes that represent the style of an element, are needed for making those changes as needed. Below given is an example:

.element{
    height: 100px;
    width: 100px;
    animation-name: myanimation;
    animation-duration: 10s;
}
@keyframes myanimation{
    0%{width: 100px;}
    25%{width: 200px;}
    50%{width: 300px;}
    75%{width: 200px;}
    100%{width: 100px;}
}

Unicode CSS Classes

Users can have a collection of CSS best practice documents and they will all begin with how to name their CSS classes. Moreover, one cannot see those documents that tell to use unicode symbols to name your classes:

.ಠ_ಠ {
	border: 1px solid #f00;
	background: pink;
}

.❤ {
	background: lightgreen;
	border: 1px solid green;
}

The background Shorthand Property Has New Values

5 longhand values like background-repeat, background-attachment, background-color, background-image, and background-position are included in the background shorthand property in CSS2.1.

Additionally, one can find three more in CSS3 and beyond and it is total upto 8. Check out below to see the values map:

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

 

You have to focus on the forward slash that seems to same as how border-radius and font shorthand cane be written.

Through slash, one can easily add a background-size value after the position in supporting browsers. Moreover, you can also have two optional declarations for background-origin and background-clip. You will find syntax like this:

example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

CSS Counters

CSS counters enable developers to boost a counter and display it through :before or :after for a given element:

/* initialize the counter */
ol.slides {
	counter-reset: slideNum;
}

/* increment the counter */
ol.slides > li {
	counter-increment: slideNum;
}

/* display the counter value */
ol.slides li:after {
	content: "[" counter(slideNum) "]";
}

 

Above listed are 7 secrets things that most of the developers don’t know about CSS. Have you got anything new from this post? Let’s share through comments. For more information, you can contact Perception System.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*