The CSS (Cascading Style Sheet) language is a bunch of selectors and properties, which allows to design, form, position and define elements within a HTML DOM. It is nothing special nor very extensive and really easy to learn. But do you really know EVERYTHING which is available in CSS (even in “Level 2”)? Unfortunately i’ve to admit: No, and the following 5 CSS Properties have expanded my repertoire again. And maybe yours too!

#5 CSS Counter

CSS Counters aren’t as fresh as the following properties, hence it are already available in the Internet Explorer 8, which is really incredible. The counter-increment and counter-reset properties, including the counter() function within the content property, allows a asc-/descending counting of elements with a respective textual output of the counter. In other words: Custom <ol> lists for everyone!

 

#4 empty-cells

It may sounds like a joke, but i NEVER heard about the CSS property empty-cells which allows to “hide” empty cells. This works on separate-collapsed tables only of course, but it is a really amazing setting. And almost every browser, unless the Internet Explorers below 8, supports this method too.

Example
Non Empty Non Empty
Non Empty
Non Empty Non Empty
<table>
    <tr>
        <td width="33%">Non Empty</td>
        <td width="33%"></td>
        <td width="33%">Non Empty</td>
    </tr>
    <!-- -->
</table>
table{
    empty-cells: hide;
    border-spacing: 2px;
    border-collapse: separate;
}
table tr th,
table tr td{
    border: 1px solid #d0d0d0;
}
<table style="empty-cells: hide;border-spacing: 2px;border-collapse: separate;">
<tr>
<td width="33%" style="border: 1px solid #d0d0d0;">Non Empty</td>
<td width="33%" style="border: 1px solid #d0d0d0;"></td>
<td width="33%" style="border: 1px solid #d0d0d0;">Non Empty</td>
</tr>
<tr>
<td width="33%" style="border: 1px solid #d0d0d0;"></td>
<td width="33%" style="border: 1px solid #d0d0d0;">Non Empty</td>
<td width="33%" style="border: 1px solid #d0d0d0;"></td>
</tr>
<tr>
<td width="33%" style="border: 1px solid #d0d0d0;">Non Empty</td>
<td width="33%" style="border: 1px solid #d0d0d0;"></td>
<td width="33%" style="border: 1px solid #d0d0d0;">Non Empty</td>
</tr>
</table>
<pre class="language-html line-numbers"><code><table>
    <tr>
        <td width="33%">Non Empty</td>
        <td width="33%"></td>
        <td width="33%">Non Empty</td>
    </tr>
    <!-- -->
</table></code></pre>
<pre class="language-css line-numbers"><code>table{
    empty-cells: hide;
    border-spacing: 2px;
    border-collapse: separate;
}
table tr th,
table tr td{
    border: 1px solid #d0d0d0;
}</code></pre>

 

#3 -webkit-text-stroke

You can stroke text using Apple Webkits -webkit-text-stroke property since 2008, at least in Apples own Safari Browser 3.1 of course. Googles Chrome Browser supports this property since 4.0 (released in 2010) followed by Opera 15 (released in 2013) and Mozillas Firefox 49 (released in 2016). The Internet Explorer doesn’t handle cool CSS Stuff, but the Edge Browser 15 was cool enough to implement this “unofficial living standard” in 2015, so even before Firefox did it!

Example

You need a modern browser for the following example!
Example
Stroke Text
.stroke{
    color: white;
    font-size: 38px;
    font-weight: 600;
    font-family: "Oswald", sans-serif;
    -webkit-text-stroke: 2px black;
}
<b style="color: #fff;font-size: 38px;font-weight: 600;font-family: Oswald;-webkit-text-stroke: 2px black;">Stroke Text</b>
<pre class="language-css line-numbers"><code>.stroke{
    color: white;
    font-size: 38px;
    font-weight: 600;
    font-family: "Oswald", sans-serif;
    <mark>-webkit-text-stroke: 2px black;</mark>
}
</code></pre>

 

#2 CSS Variables

You can use CSS Variables without switching to LESS or SCSS (SASS), or any other Pre-Processor, by using 2 hyphens -- within a CSS declaration. The respective variable is limited within the scope of the respective element, including all child elements. So global variables should be defined directly either in html or in the pseudo :root element. This “new” technique might be really cool (and Bootstrap 4 already use it) but it comes too late and doesnt brings the complete comfort as in LESS, for example. This is also some very experimental stuff, therefore this is only supported by cool browsers like 31, 49, 36, 15 and 9.1.

Example

Example
The example below will colorize the first and third line in red, using the main variable declaration. The second line is shown in green, because it changes the variable for itself. The fourth line is blue, because neither it nor his parents has defined the variable “color” so it uses the fallback (second argument).
<div class="main">
	<p class="first">This text should be Red</p>
	<p class="second">This text should be Green</p>
	<p class="third">This text should be Red</p>
</div>
<div class="main">This text is blue, because its no child of .main.</div>
.main{
    --color: #ff0000;
}
.main p{
    color: var(--color)
}
.main p.second{
    --color: #00ff00;
}
.none{
    color: var(--color, #0000ff);
}
The example below will colorize the first and third line in red, using the main variable declaration. The second line is shown in green, because it changes the variable for itself. The fourth line is blue, because neither it nor his parents has defined the variable “color” so it uses the fallback (second argument).
<pre class="language-html line-numbers"><code><div class="main">
	<p class="first">This text should be Red</p>
	<p class="second">This text should be Green</p>
	<p class="third">This text should be Red</p>
</div>
<div class="main">This text is blue, because its no child of .main.</div></code></pre>
<pre class="language-css line-numbers"><code>.main{
    --color: #ff0000;
}
.main p{
    color: var(--color)
}
.main p.second{
    --color: #00ff00;
}
.none{
    color: var(--color, #0000ff);
}</code></pre>

 

#1 all

This is one of the strongest and most fearsome CSS 3 properties on the complete W3 Standard! It allows to kill almost ALL CSS properties, which has been defined previously including the browser own defaults! With great power there must also come great responsibility, so please use this property with the same respect as you respect your cat during a takeover of your house. You also need a bit more modern browser like 37, 27, 24 or 9.1, because the Internet Explorer is too scared of it!

You need a modern browser for the following example!
Example
<button style="all:unset;">Ths should be a button!</button>
<button style="all:unset;">Ths should be a button!</button>
<pre class="language-html"><code><button style="all:unset;">Ths should be a button!</button></code></pre>