Variables

If you thought that CSS doesn’t have any kind of programmable logic, maybe you’re wrong and no, I’m not even talking about a complex hack to create a toggleable button but I’m talking of simple variable declaration.

To use them is like any language. Declare and call:

:root{

/* Variable declaration */

--purple: purple;

} element{

/* Variable usage */

background-color: var(--purple);

}

I recommend declare variables in the :root element (they can be declared inside any element as well) that refers to root document because this will give you a better semantic. You can load a external file where you declare your variables.css and then import them in your page. With variables you unleash the power to manage your templates properties, your color palettes or create dynamic themes without any headache.

https://codepen.io/adrian-legaspi/pen/XWJRNRG

Text selection

This option is more powerful than you think, overriding the default browser color selection can be very good to give a better feedback to the user experience or to make more immersive your user interface in general. There’s a world of possibilities but that’s your part, I’m just going to show you the usage:

::selection {

color: white;

background: purple;

}

https://codepen.io/adrian-legaspi/pen/qBEmqgb

Very easy to apply and with so much potential, too bad that it hasn’t been used as the property deserves. In desktop development that uses web technologies I think that can have a great place. In your next web project give a try to this.

Content

This property is a good example of how CSS tries to be more dynamic and we love the effort that the language makes. Content property is mainly used to insert some text but you can set an image by URL as well. The bad new is that only can be used in pseudo elements :before and :after, this doesn’t mean that isn’t useful.

element:before, element:after{

content: “A text, url, attribute data or an emoji 😁”

}

https://codepen.io/adrian-legaspi/pen/qBEmRpj

The content accepts strings, data from an attribute of the element or an image URL. I want to give a notation about the concatenation string because is not necessary to add a glue symbol like “+” in JavaScript or “.” in PHP, only writing the string next to your content will be a valid value for our property.

/* Another valid string example */

content: "#"attr(id)" - "url(image.url)" Another content "

Calc

This is not a property but is a function, a logical function!. With this we have the superpower to calculate a property value dynamically. For example let’s imagine that we have a <main> content with an dynamic height of 100vh but we have a <navbar> with static height of 40px and we want both elements were displayed at the same time… the old solution would be handle this with JavaScript that will result on more than one line to solve it, but this problem now is resolved like this:

main{

height: calc(100vh - 40px);

}

Simple as that!

In the past years was necessary to use the browser selectors like -webkit or -moz but in this days is not necessary at all.

https://codepen.io/andeersg/pen/gaKadg

Filters

What a time to be alive, in the past we doesn’t had grids and today we even can style images with filters. Filter like bright, saturation, blur and more are valid properties and you can use them right now.

img{

filter: filterfunction(value);

}

The property filter receive one of the valid functions and it’s kinda fun play around with this.

https://codepen.io/adrian-legaspi/pen/KKwmaOV

Out there are good CSS libraries made to simulate the Instagram filters like this, are great options because in the vast majority their base the functionality on the CSS filter property.

Ah, I gotta say that as far as I know is not necessary to use the browser prefix because in Mozilla and Chrome the filter property alone works fine, but use the -webkit prefix anyway to maximize the compatibility with quite older Chrome versions.

Conclusion

The Cascade Style Sheet language can surprise us more than we thought even when we’ve working with him for years. Hope you give the opportunity to keep looking for more interesting hacks and features that you can achieve with all your work technologies, not only for CSS.