5 CSS3 features explained

CSS3 is one of the coolest new web technologies available to front-end developers right now, overtime we have seen so many features that generally were implemented via JavaScript, can now be acheived with a few lines of CSS. So in this post i will explain to you five features that will save you time and energy.

Flexible boxes

The CSS3 Flexible Box, better known as Flexbox enables you to create complex layouts with only a few lines of code. How many time you wanted to vertically center a div ? how many time you wanted to create a 3 columns layout with 2 fluid columns and one fixed ? here is how to do it — with CSS only

Vertical centering of a div

Fixed-Fluid-Fixed Layout

As you can see this will allow you to make other layouts(Fluid-Fluid-Fixed, Fluid-Fixed-Fixed, etc...), easy no ?

:nth-child

:nth-child is a CSS pseudo-class which allows you to select elements with a formula :nth-child(n). The pseudo-class accepts an argument, n, which can be a keyword, a number or a number expression of the form an+b.

A good use case is displaying a zebra striping table without using extra CSS classes, JavaScript, or server-side code using the modulo, only CSS hein ?

There is also :nth-of-type it works the same way , except that it only considers element of the given type.

CSS Hyphenation

The hyphens CSS property tells the browser how to go about splitting words to improve the layout of text when line-wrapping. On HTML, the language is determined by the lang attribute: browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. On XML, the xml:lang attribute must be used.

Source MDN.

NB: To see the result you need to try to resize the window of your demo.

CSS Filter Effects

Filters are a powerful tool, they can manipulate the appearance of any HTML element and can be stacked together to create unique effects and provide endless of possibilities, such as grayscale, sepia, saturation, opacity, and blurs. The filter property creates a hardware-accelerated effects using the GPU.

CSS3 Media Queries

CSS3 Media queries allow you to target CSS rules based on screen size, device-orientation or display-density, you can add expressions to media type to check for certain conditions, this is the technique used for the so called "Responsive design".

/* The following CSS will apply if the viewing area is smaller than 600px. */
@media screen and (max-width: 600px) {
    .class {
        background: #ccc;
    }
}

/* The following CSS will apply if the viewing area is 700px wide or wider and the display is in landscape mode. */
@media screen and (min-width: 700px) and (orientation: landscape) {
    .class {
        background: #ccc;
    }
}

You can also apply css rules based on media types screen, tv or handheld, you can find the list here

Let me know your thoughts in the comments below, also you can discuss, upvote this post over at Hacker News.