Tricks are often useful when handling complex or time consuming works by speeding up your work process with some shortcuts. And so are some CSS tricks, which can dramatically improve your work process and help you code and design better in no time.
In this article, I will be discussing 5 very handy CSS tricks which can really save time and ensure that you complete your project before your deadline. Note: – Some of these CSS tricks are still in the experimental stage, and haven’t been widely implemented in all the browsers. They are yet to be implemented in all the major browser, though you can still see these effects in some specific browsers like Opera.
1) Using CSS Variables
You can use CSS variables to ease your job when setting a preferred colour palette or defining some pre-decided sizes.
For example, if you have chosen a particular shade of red as the primary colour for a variety of elements on your webpage, then you can just define a variable with the HEX code of that colour and use that anywhere without even remembering the HEX code. This can be done in the following manner,
[css] html {
var-my-color: #d93939;
}
.myBox {
background-color: var(my-color);
} [/css]
In this way you will be setting a global variable called my-color which can be used within any CSS selectors using the var() method.
2) Using CSS Columns
If you are looking to add some texts divided into several columns within a section of your page, then don’t waste time in making calculations and dividing them manually. You can do this simple task with a few extra lines in your normal CSS coding.
For example, if want to add three columns of text within a section called mySection, then you can do so in the following way,
[css] .mySection p{
-moz-columns:3;
-webkit-columns:3;
columns:3;
} [/css]
Now whenever you will write some text within <p> and </p> tags of this section, they will automatically be divided into three columns and displayed in the appropriate section of your page.
3) Using calc() function
This function comes in handy when you are in a hurry to make some complex calculations and want to place some derived formula directly into your code skipping the calculations.
You can use this function anywhere in the following manner,
[css] .myBox {
     width: calc(100% – 10*70px);
     height: calc(100% – 400px);
} [/css]
This code will generate a box of sizes which are calculated using the given formula within the calc()Â function.
4) Using Max and Min Widths
If you are using responsive designs then these keywords will come in handy. For example if you are making your designs responsive and using % to denote specific heights and widths of different sections instead of px.
In that case, the max-width, max-height, min-width and min-height keywords will come in handy. Suppose you want a box whose sizes will be determined by the screen size of the device but at any time should not exceed or fall below a certain value, so you can get this job done easily like this,
[css] .myBox {
width: 60%;
height: 40%;
min-width: 20px;
max-width: 100px;
min-height: 85px;
max-height: 150px;
} [/css]
This code will ensure that the box size never falls below 20px x 85px and never exceeds 100px x 150px.
5) Using CSS counters
Manually numbering different headings consume time and can be a burden. Using this CSS counters you can put that task to autopilot and keep creating different headings, while the counter automatically increases and sets the correct numbering.
This can be done using in the following manner,
[css] body {
counter-reset:heading;
}
h1:before {
counter-increment:heading;
content: counter(heading) ") ";
} [/css]
This code will add a number starting from 1 before any H1 heading on a page whenever you use the <h1> and </h1> tags. Here, heading is our pre-defined counter name.
Final Thoughts
This brings us to the end of the list of 5 useful CSS tricks, though more CSS tricks like these will be coming up shortly, so stay tuned.