Sophisticated CSS User Series Part II: Life Saving Hacks of CSS

Hack World of CSS

Hacks aka shortcuts can be life savior in the digital world. Yep, you might have heard that all shortcuts are not and can even indulge you into deeper trouble. But, in the computer programming languages, hacks can be treated as a blessing in disguise. With the help of hacks, you can perform a long coding task within few seconds.

That’s why in the next installment of Sophisticated CSS User Series, we will unveil some unknown hacks of CSS which can save you from writing long codes. Well, using hacks in CSS can be very beneficial apart from the internet explorer browser.

Why Should You Use CSS Hacks?

Utilization of hacks over the separate CSS files is highly recommended. Because:

  • CSS hacks can work with all the web browsers apart from the internet explorer. Even the new web browsers are rendering things differently, such as input fields, checkboxes or table caption.
  • When everything is kept in the one file, then it became easier to maintain or.
  • With the CSS hacks a smaller number of server requests will be made.
  • Not every hack is a shortcut, sometimes hack is just smart use selectors (not) supported only by a specific browser.

Giant Informative List of CSS Hacks

Let me clear few things before starting the list, the CSS hacks works different with each web browser. In case of internet explorer, it only works with IE7. Moreover, CSS hacks expire very easily, so some of the hacks might not work when you are using them, so use these hacks as per your intelligence.

#1. Align It To Center

By using the transform: translate(); and position:absolute;, you can easily align anything in the center of its parent. Like:

.my-class-parent {

   position:relative;

}

/* I’m using -webkit- otherwise this won’t work on Webkit based browsers like Safari and older versions of Chrome */

.my-class {

   position:absolute;

   top:50%;

   left:50%;

   -webkit-transform:translate(-50%, -50%);

   transform:translate(-50%, -50%);

}

#2. Customise Website

Using this hack you can customize the color of website according to your taste. Like:

a[href*=”twitter.com”] {

   color:#55acee;

}

 

a[href*=”facebook.com”] {

   color:#3b5998;

}

 

a[href*=”google.com”] {

   color:#db4437;

}

#3. Start From The End

Any good CSS developer knows how to select element with the :nth-child. But, have you ever think about starting the CSS from the end, instead of the beginning. Yep, that’s with this hack:

.my-class:nth-last-child(3) {

   background:red;

}

#4. Hide Annoying Empty Table Cells

How annoying it became when empty table cells keep on interrupting while styling the table. So, simply hide the empty cells using:

table {

   empty-cells: hide;

}

#5. Chain Selectors

If you chain all the same selectors, then you can override all the styles. In this way:

.my-class {

   color:red;

}

 

/* More Important */

.my-class.my-class {

   color:blue;

}

 

/* Even More Important */

.my-class.my-class.my-class {

   color:green;

}

#6. Specific Type

You can style an input according to its type also, such as text, email or password. For example:

/* Text */

input[type=”text”] {

   color:red;

}

 

/* Email */

input[type=”email”] {

   color:blue;

}

 

/* Password */

input[type=”password”] {

   color:green;

}

#7. For Internet Explorer

If you want to add some color to your internet explorer, but don’t want to create a separate style sheet. Then, we have something for you:

/* IE6 and below */

* HTML .my-class-goes-here {

   color:red;

}

 

/* IE 7 only */

*:first-child+html {

   color:blu

#8. Selector

You can apply a style to any selector that ends with the string text. Such as:

[class$=”-goes-here”] {

   color:red;

}

 

Well, readers, we hope you can use these CSS hacks and can improve your performance. But, if you have any other CSS hacks to share with us, then please do.

Send a Message