Things you may not know about CSS

Grammatical error like style using CSS:

.grammar{ 
   -moz-text-decoration-color: green;
   -moz-text-decoration-line: underline;
   -moz-text-decoration-style: wavy;
   text-decoration-color: green;
   text-decoration-line: underline;
   text-decoration-style: wavy;
}

Output:

CSS 'empty-cells' Property

table{
   empty-cells:hide;
}

  

CSS @supports 

Usually we do CSS feature-test using JavaScript. Now it can be done in CSS with a new property '@supports'. So for Firefox 22+ , Chrome 28+, Opera 12.1+ supports this feature. So we can look forward to using it soon!

Example:

/* basic usage */
@supports(prop:value) {
    /* more styles */
}

/* real usage */
@supports (display: flex) {
    div { 
      display: flex;
    }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      float: none;
    }
}

CSS Filter Effects:

For an Image, we usually apply filters using Canvas. But CSS supports this filter operation via 'filter' property. Note that this property is significantly different from and incompatible with Microsoft's older "filter" property. So for only webkit browsers support this feature (Chrome 18+, Safari 7+, Opera 15+)

Supported filter properties:

1. blur
2. grayscale 
3. drop-shadow 
4. sepia 
5. brightness 
6. contrast 
7. hue-rotate 
8. invert 
9. saturate 
10. opacity

Click here for demo

Example:

.blurFilter{
-webkit-filter: blur(2px);
} 
 .imageFilter{
     -webkit-filter: blur(5px) brightness(3.9) contrast(3.5) drop-shadow(72px 72px 20px black) grayscale(0.5) hue-rotate(120deg) invert(0.2) opacity(0.1) saturate(1.9) sepia(0.2);
}

CSS 'pointer-events':

This property is magical. Yes you can really disable a element using the power of CSS. You don't need JavaScript anymore to do the stuff.  

'pointer-events' CSS property actually disables the mouse events on an element.

Example:

/*CSS:*/
.disabled{
     pointer-events:none;
}

<!--HTML:-->
<a href="http://www.google.com" class="disabled">Google</a>

<p onclick="alert(1)" class="disabled">Pop an alert</p>

The above example wont fire any mouse events on the element.

CSS Counters: 

CSS3 introduces the numbering of HTML elements using CSS Counters. For example, if we need to mention the chapter count with respect to h2 tag - usually we do some JavaScript stuffs to achieve it. But CSS counters done an awesome job to achieve the same.

Initializing the CSS Counter:

Syntax:

counter-reset: none|identity [number]

Example:

section{
   counter-reset: chapter;
}

 In the above example, 'chapter' is a user defined identity that is used for the increment and display purpose. By default the identity is reset to '0'. 'none'  will disable the counter

Incrementing the CSS Counter:

Syntax:

counter-increment: none|identity [number]

Example:

section > h1{
   counter-increment: chapter;
}

counter-increment increments the counter identity by '1' by default. The increment value can be specified next to the identity. Be aware that you must use '>' in your selector if you have nested lists so that your list numbering doesn't get incremented at the wrong points.
'none'  will disable the counter.

Note: IE8 supports the counter-increment property only if a !DOCTYPE is specified. Also, an element that is not displayed (display:none) cannot increment or reset a counter.

Using the Counter Value:

We use counter values with pseudo elements for display purpose. The in built 'counter' function will return the current elements increment value with respect to the chapter. The return value can be formatted by passing the following property values as parameter to the counter function.

decimal
Decimal numbers, beginning with 1.
decimal-leading-zero
Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
lower-roman
Lowercase roman numerals (i, ii, iii, iv, v, etc.).
upper-roman
Uppercase roman numerals (I, II, III, IV, V, etc.).
georgian
Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Traditional uppercase Armenian numbering.
lower-latin or lower-alpha
Lowercase ascii letters (a, b, c, ... z).
upper-latin or upper-alpha
Uppercase ascii letters (A, B, C, ... Z).
lower-greek
Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)

Example:

section{
     counter-reset: chapter;
}
section > h1{
    counter-increment: chapter;
}
section h1:before{
    content:"(Chapter " counter(chapter, upper-roman) ")"
}

ul{
    counter-reset: list;
}
ul > li {
    counter-increment:list;
}
ul li:before{
    content: "(Item " counters(list, ".") ")";
}

Output:

 

Click Here For Demo

:empty Pseudo Selector:

The :empty pseudo selector will select empty elements or elements with only comments. This will be helpful in hiding empty elements.

Example:

/*CSS*/
div:empty { 
   display: none; 
}

<!--HTML-->
<div></div>
<div><!-- test --></div>

'will-change' CSS Property - For Performance

If you tried getting some complex animations and transforms via css3, you might noticed some flickers in the animation in most of the webkit based browsers. Here you might need to understand the term 'Hardware acceleration'. Hardware Acceleration means that the Graphics Processing Unit (GPU) will assist your browser in rendering a page by doing some of the heavy lifting, instead of throwing it all onto the Central Processing Unit (CPU) to do.

Click here to Read More....

translateZ() (or translate3d()) Hack:

transform: translate3d(0, 0, 0);

Generally the browser's 3d rendering is hardware accelerated. So, this hack informs the browser to hardware accelerate the element.

Hardware-accelerating an operation results in the creation of what is known as a compositor layer that is uploaded to and composited by the GPU. However, force-hacking layer creation may not always be the solution to certain performance bottlenecks on a page. Layer creation techniques can boost page speed, but they come with a cost: they take up memory in system RAM and on the GPU (particularly limited on mobile devices) and having lots of them can have a bad impact (especially on mobile devices), so they must be used wisely and you need to make sure that hardware-accelerating your operation will really help the performance of your page, and that a performance bottleneck is not being caused by another operation on your page. 

In order to avoid such layer creation hacks, CSS introduces a new property 'will-change', which enables the browser to hardware accelerate the element while performing certain operation that we mention in the property.

Example:

will-change: transform, opacity;

Note: Don’t Use will-change to Declare Changes to Too Many Properties or Element, this may lead to browser crash. Example,

*,
*::before,
*::after {
 will-change: all;
}

New CSS3 Cursors 

Mouse over the list to view cursors,

1. none
2. context-menu
3. cell
4. vertical-text
5. alias
6. copy
7. no-drop
8. not-allowed
9. col-resize
10. row-resize
11. all-scroll
12. zoom-in
13. zoom-out

Browser support:

FIREFOX - All supported. Issue: no-drop same as not-allowed

IE - Doesn't support none, context-menu, cell, alias, copy, zoom-in/out.

OPERA - Only supports col-resize, row-resize, all-scroll and zoom-in/out on Windows

SAFARI - All supported

CHROME - All supported