Today’s CSS provides you enormous number of possibilities - from general styles to awesome animation effects with rotating in 3-dimensional space. Responsive design for applications is easier than ever. Here you can read about 9 modern CSS features that are available to use today.
1. Flex
Flex (or flexbox) is a feature that provides more efficient way to lay out, align and distribute free space between item even if their size is unknown or dynamic . Flexbox is known since 2009, but it changed its syntax and yet is not very popular. Today, major browsers support this feature, though if you need IE9 and lower support - you will be disappointed. If you want maximal compatibility with other browsers you need to write a full stack of rules in such manner:
.flex-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width: 100%;
}
What are the main purposes you can use flexbox for? There are a few reasons for that:
- It’s really easy to create responsive layout with a few lines of CSS code.
- Aligning items vertically and horizontally became a simple thing - you don’t need to think and worry about old hacks, just use flex.
- Blocks of different sizes in a single row can be easily stretched vertically.
- If you need to change the order of elements - you will be pleased, flex can do even this.
- You can create any module - menu, sidebar, photo gallery and even whole layout without usage of float property, isn’t that awesome?
If you need a grid system based on flex, then Flexbox grid will be very helpful for you. You can read more about flex here. There’s enough examples to understand the basics. Internet provides you many playgrounds to use and try flex:
So, just try it!
2. Pointer-events
This feature disables any events of a layer. It makes this layer “invisible” for a pointer. Also this feature can be useful if you want to optimize the speed of scrolling your page with enormous count of interactive elements. How does it works? While scrolling cursor of your mouse hovers elements and can cause reaction of elements on it, even if you don’t need it. This action says browser to repaint the rectangle with the element. Of course it’s not very important if we talk about a small element, but if number of elements is huge or you need to apply complex styles - you need to think about performance. In this case turning on
pointer-events: none
is a very good idea to deal with.
The other reason to use them is disabling upper layer. This example shows how it can be useful. Moreover, if you want your tab or menu item to be disabled while being active, you can use this property and be sure it will work properly.
I have to mention it doesn’t work in IE10, but if you don’t worry about that - just try.
3. Clip-path
This feature is known for frontend developers as clip, but it’s deprecated now and you have to use clip-path instead of it. Clip feature allowed to work only with rectangle properties.Clip-path allows you to work with any shapes - circle, rectangle, ellipse, stars and so on. Here you can try it and get any form you like - predefined or custom.
What are the advantages of this feature?
- It allows you to create any shape you need
- It Works nice with SVG
- Only clipped area responds to mouse events - not the whole image.
Disadvantages are also present:
- IE support is absent - others support this with prefixes.
If you defined borders for object, they will be clipped. Despite this I think that it’s a cool feature that will help many frontend developers to create wonderful designs for image covers and other graphical elements.
Some examples to look through:
- http://codepen.io/imohkay/pen/RPWyjz
- http://codepen.io/imohkay/pen/KpdBrw
- http://codepen.io/imohkay/pen/ZGbjbz
4. will-change
This feature allows to set element to a separate layer in order to prepare it for rendering. Sara Soueidan describes how to deal with this feature. Browser tries to optimize elements by itself. Simple operation like opacity changing doesn’t demand much CPU resources, but other operations such as transform can be a reason of slowing down page, especially when you have a big amount of them.
One of the hacks to deal with that was usage of
transform: translate3d(0, 0, 0);
That demands browser to put an element to a new layer and optimize it using GPU resources. Using will-change you don’t need to worry about that - just use this property in your CSS code. But be careful - this is not always good for you. Compatibility - latest browsers work with it, except any IE or Safari. We only need to wait for other browsers to support this feature..
5. CSS columns
Good news for those who works with big blocks of text and don’t want to spend time to divide them into columns manually. With a single line you can specify any columns number for your text block in such way:
column-count: 3;
Or set width in this manner:
column-width: 100px;
Decoration features allow you to set space between columns, draw a line between them.
The problem with compatibility exists - IE9 and lower doesn’t support this feature - for others it is accessible but with prefixes mostly. CSS4 draft says that we will have a possibility to choose column with :nth-column() pseudo class. This will allow us to set styles for each column separately. Sounds cool, we’ll see.
6. Interaction media features
As you know we use @media to define the screen size of a device and set proper styles depending on that. Though @media isn’t only for that. So called “CSS4” provides new features as
- @media (pointer:fine) {}
- @media (hover:hover) {}
- @media (pointer:coarse) {}
- @media (hover:none), (hover:on-demand) {}
What does that mean? Now we can check and use styles for devices depending on their type. Johnathan Fielding describes what are these features for:
pointer:coarse – specifies that device’s primary input method is not precise/accurate, the example is a finger on a touch screen
pointer:fine – specifies that device’s primary input method is precise, an example is a mouse or trackpad.
hover:on-demand – specifies that user is able to perform a hover action, however not by simply hovering over an element. An example would be some mobile browsers requiring you to “long press” the element to trigger the hover action.
hover:hover – specifies that user is able to hover over elements in the page. This means that anything you specify using :hover can be triggered easily by a user.
Guess, you will like this feature.
Though only IE Edge, and latest Chrome and Opera support them. Nothing is ideal!
7. Blend-modes
This feature is a so called photoshop in a pocket. Would you like to make your image red or green? Maybe you have two images you want to mix or have an unusual effect for them? Then blend-mode is for you. Just use the syntax mix-blend-mode: multiply; and choose images and colours for your background - ready!
In your favour there’s a big number of blending-types:
Normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
They all can be applied to your image, or you can even choose some of them together and get unpredictable, but cool effect - just play with it.
IE will disappoint you again, though you are alright with that, aren’t you?
8. CSS4 selectors
CSS4 is far from being in common use today, though W3c team works on it and publishes more and more new features. What are they?
- parent selector
i.e. you have such selector - .bock-item .child. There can be many items with .block-item class. But you need the one with .child class. In this case parent selector will be very useful.
- grid-structural pseudo-classes: :column, :nth-column, :nth-last-column (working with css-columns as mentioned above)
- tree-structural pseudo-classes: :nth-match, :nth-last-match
- ui state pseudo-class: :indeterminate
- time-dimensional pseudo-classes: :past, :current, :future
- location pseudo-classes: :any-link, :local-link
- logical combinators: :matches, :not
All these features can be changed but do they give us now? Just let’s look at “:matches” pseudo selector.
:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}
It uses cartesian product to get all matches for selectors. Doesn’t sound impressive? Look at how you need to write it now:
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}
Nice. What about variables? Define the one at the beginning and use it in you CSS anywhere. It’s already present in SASS and LESS you say? But what if you need to write on pure CSS without any preprocessors and libraries? This will help you so much. The only one bad news - currently unsupported. Let’s wait.
9. Box-sizing
Box-model is a well-known thing among frontend developers. It isn’t new (at least since 1998, when it was introduced). The main thing everyone should know is how the size of object is calculated:
padding + border + width = actual rendered width
padding + border + height = actual rendered height
What’s the problem? Imagine you have menu with 5 items. Each you set 20% width. Then you decided to add border. You will get something like this:
Using of box-sizing:border-box allows you to avoid such problem. This property will tell browser to calculate size of object with borders and padding (but not margins). The other property box-sizing:padding-box gives you same effect but without borders (only paddings included in calculations).
Good news: supported everywhere! With prefixes in some case, but who cares when you have full cross-browser support?
This is not a full list of features, which are accessible now or will be in future, just a part of it. Though most of them you can use now and feel the power of CSS. Hope you will find something new for yourself. Enjoy CSS!
