Since its inception, CSS has come a long way to become one of the most valuable tools in the web designing realm. If you are a web designer and are playing around CSS for quite a while, you’ll not deny its prominence and will surely confirm how effectively it has emerged as a fully-fledge designing standard.
CSS has now evolved quite impressively from an initial idea to a complete standard, allowing so many designers to come up with awe-inspiring designs. As a designing language, CSS has shown a beautiful progress and will continue the dominate the designing industry from every angle in the near future.
In this post, we are going to discuss about some predictions about CSS and how it will change the games for those who are benefiting from it, quite surprisingly. We will talk about newest modules, CSS features and several other things that will help you manage project flow and development.
1. The Rise of CSS Selectors Level 4
The level 3 selectors have been modified to another level, giving the rise to useful selectors such as nth-child. With selector 4, we mean that there will be now better ways to target content using CSS. Some important functions that are included within the selector 4 are:
The negation pseudo-class :not
It’s a function which first sprung in the level 3 however it has now been updated to match the specifications of level 4. In level 3, you all need to pass a selector to specify if you don’t need CSS to be applied on to a specific element. For this, the below mentioned rule is used.
p:not(.intro) { font-weight: normal; }
However, in the level 4, a comma could be passed to separate the list of selectors.
p:not(.intro, blockquote) { font-weight: normal; }
The relational pseudo-class :has
The primary objective of pseudo-list is to take a selector list as an argument and then match if any of them is matching even a single element. To understand the concept better, look at the example below. Here the element ‘a’ which consists an image will be applied with a black border.
a:has( > img ) { border: 1px solid #000; }
In the next example, you can see we are combining :has and :not and selecting li elements do not involve paragraph element.
li:not(:has(p)) { padding-bottom: 1em; }
The matches-any pseudo-class :matches
It’s a beautiful function that will help you apply rules to groups of selectors. This is how it could be done:
p:matches(.alert, .error, .warn) { color: red; }
In order to ensure whether the function is being fully supported by your browser, you can use CSS4-selectors.com. It’s a helpful site for knowing more about CSS and the upcoming selectors.
2. The Enhanced Beauty of CSS Blend Modes
For those who have worked on Photoshop and have made the most out of blend modes, probably you’d be interested to know about the compositing and blending related specifications. The specification is helpful in applying blend modes to backgrounds or HTML elements in the browser.
In the following example, we have added a background color to the image inside the box and then set background-blend-mode to hue, so that cool effects on the image can be applied.
.box {
background-image: url(balloons.jpg);
}
.box2 {
background-color: red;
background-blend-mode: hue;
}
.box3 {
background-color: blue;
background-blend-mode: multiply;
}
Using the property like mix-blend-mode, one can easily blend text right on the top of the image. This is how one can go about it:
.box {
background-image: url(balloons-large.jpg);
}
.box h1 {
font-size: 140px;
color: green;
}
.box2 h1 {
mix-blend-mode: screen;
}
CSS Blend Modes is an awesome function with a great support for all the leading browsers. If used carefully, one can effortlessly enhance their designs and make them presentable.
3. CSS Shapes
We all are aware of the power of CSS shapes and how they give us ability to wrap text around non-rectangular objects. They mostly include flowing text around a curve. Here, we are defining the property ‘shape-outside’, which you can find in the level 1 of the CSS shapes specification. This is how you can use shape-outside to curve the text around a floating image.
.shape {
width: 200px;
float: left;
shape-outside: circle(50{5e86fe31664958087f0ee4232cad85b76ee6822f7462b2cad470bfb365a345db});
}
4. Improved CALC() Function
Introduced in the level 3, CALC() offers a simplest way to do mathematical functions in CSS as a replacement of any length value. It features four basic math operations: add (+), sub (-), multiply (*), and divide (/). The most basic use of calc() can be observed at times when a background image needs to be placed from the bottom of an element.
We can position a background image X pixels from the top-left corner easily this way.
.box {
background-image: url(check.png);
background-position: 30px 30px;
}
However, it’s quite difficult to do the same from the bottom right, especially when you are not aware about the dimensions of the container. Using calc() functions means now you need to deduct the 30pixels from 100{5e86fe31664958087f0ee4232cad85b76ee6822f7462b2cad470bfb365a345db} of the width or height; just like this.
.box {
background-image: url(check.png);
background-position: calc(100{5e86fe31664958087f0ee4232cad85b76ee6822f7462b2cad470bfb365a345db} – 30px) calc(100{5e86fe31664958087f0ee4232cad85b76ee6822f7462b2cad470bfb365a345db} – 30px);
}
The Calc() function is W3C recommended. However, at the time of writing it is only supported by Internet Explorer. Firefox also supports it if used prefix moz-calc().
5. CSS Grids Layouts
CSS3 grid layout element that helps us define a grid and place elements on to it is showcasing a strong growth in the web design world. The ‘grid’ property is the foundation of layout concept. They allow developers split a design into a grid and place content onto that grid. Using grid layouts, developers can easily create layouts which can be refined using media queries and can be adapted to different contexts.
You can declare an actual grid on a container element and then use it to position the element inside. This is how a grid can be declared:
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta charset=”utf-8″>
<style>
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150{5e86fe31664958087f0ee4232cad85b76ee6822f7462b2cad470bfb365a345db};
}
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.e {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.f {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
</style>
</head>
<body>
<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</body>
</html>
In the above example, we have declared a grid on the .wrapper element. We have used the ‘grid-columns’ property to create a grid which has 100 pixel-wide column, 10 pixel gutter, and a flexible width auto column and three rows. Using the ‘grid-rows’ property, we have created three rows. The box is positioned inside the box by using line numbers. The desirable element will be displayed effectively whatever space is left below.
Wrapping Up
I hope you have now gained a pretty good idea about CSS and what’s going around it to empower web designers. CSS is a complex technology and in 2015, web designers will need to understand its importance more to create designs that appeal to their users.
Author Bio: Maria is an innovative and experimental veteran developer, who now devote her time in advising its clients to hire offshore PHP developers. She is also associated with Xicom Technologies, a software development company which delivers most comprehensive web applications and solutions for different industry verticals.
