Top 10 CSS Hacks For Every Web Developer

Cascading Style Sheets is the best way to build the Website more attractive. CSS has lots of tricks. Different type of tricks using knowledge and good CSS design always holds the client to spend his/her precious time to the website. I was started to build the website as a PSD slicing, then I learned lots of HTML tags and new CSS tricks. In the same time, I made many attractive websites with the help of CSS2 and CSS3. So, that’s why I want to share a few CSS tricks with CSS hack rules which I think every web developer needs to know.

Top 10 CSS Hacks:

1. Any Section Shows in the Center of the Screen with Position Absolute CSS

If we need any section display in the center of the screen for any resolution, then we can follow this trick. It’s very easy to implement on the website.

2. Vertical Height

Sometimes we need 90% or 60% height for the entire screen. That time you can manage this with vh (view height) CSS trick as I mentioned below.

3. CSS Columns

When we create any column-based layouts then we usually use JavaScript, which is very complicated and takes time. But, now there is a way around this by using the CSS columns rule:

HTML

CSS

4. First letter caps

We know drop caps content grabs our attention first because it looks very nice. It feels like a traditional book-style and we all hope to put this style in the content block.

Now CSS gives us the opportunity. Please check the below example.

5. Gradient Text and Background

Gradient color looks very attractive. Previously we were used gradient image. But now CSS have new tricks for gradient CSS. Here is an example.

Text gradient

Background Gradient

6. Cross-Browser Change the Text Selection Color

When we select any portion of text in the browser, then it shows stander color blue. But CSS has the trick to change this color in a different browser.

7. Browser CSS Hacks

Every browser has default spacing, gap, sizing etc. and when we create any pixel perfect design for all browser supported, then sometimes we need those ticks which are very useful for building a perfect website design. Also, sometimes we need a different type of style for a different browser, then we can follow this CSS hacking rules. It’s very helpful for any browser related issue.

/* IE6 */
.textColor { _color: red }
 
/* IE6, IE7 */
.textColor { *color: red; }
 
/* Everything but IE6 */
.textColor { color/**/: red }
 
/* IE6, IE7, IE8, but also IE9 in some cases :( */
.textColor { color: red; }
 
/* IE7, IE8 */
.textColor { color/*\**/: red; }
 
/* IE8, IE9 */
.textColor  {color: red
/* IE6 */
.textColor { _color: red }
 
/* IE6, IE7 */
.textColor { *color: red; }
 
/* Everything but IE6 */
.textColor { color/**/: red }
 
/* IE6, IE7, IE8, but also IE9 in some cases :( */
.textColor { color: red\9; }
 
/* IE7, IE8 */
.textColor { color/*\**/: red\9; }
 
/* IE8, IE9 */
.textColor  {color: red\0/;}
 
/* IE9, IE10 */
@media screen and (min-width:0\0) {
.textColor { color: red}
}
/;}
 
/* IE9, IE10 */
@media screen and (min-width:0
/* IE6 */
.textColor { _color: red }
 
/* IE6, IE7 */
.textColor { *color: red; }
 
/* Everything but IE6 */
.textColor { color/**/: red }
 
/* IE6, IE7, IE8, but also IE9 in some cases :( */
.textColor { color: red\9; }
 
/* IE7, IE8 */
.textColor { color/*\**/: red\9; }
 
/* IE8, IE9 */
.textColor  {color: red\0/;}
 
/* IE9, IE10 */
@media screen and (min-width:0\0) {
.textColor { color: red}
}
) {
.textColor { color: red}
}
/* Firefox CSS hacks */
@-moz-document url-prefix()  {
.textColor  { color: red; }
}
/* Chrome CSS hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.textColor  { color:red; }
}
/* Opera CSS hacks */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .textColor  { color:red; }
}
/* Safari CSS hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.textColor  { color: red; }
}
/* Opera 9.27 and below, safari 2 */
html:first-child .textColor { color: red }
 
/* Safari 2-3 */
html[xmlns*=""] body:last-child .textColor { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) .textColor { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type .textColor {  color: red }
 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.textColor { color: red  }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
.textColor { color: red  }
}

8. Mobile Browser Input Field Design Issue in iPhone

When you open any website in iPhone browser then you can follow every input adding rounded corners and drop shadows effects. Sometimes we don’t need this style. Well, it’s a very simple fix. Just add this to any input fields or buttons you don’t want to restyle.

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

9. Important

Sometimes we follow few inline CSS written in the HTML file and We can’t hack those style properties with the external CSS file, because inline CSS override your external CSS. But don’t worry, CSS gives us the opportunity to override this.

<p class=’’textColor” style=”color: red;”>Example</p>
.textColor {color: green !important;}

10. Responsive

In present day every client’s needs responsive design because they want all device compatible website and now it’s possible from media query. Here is the example below.

@media only screen and (max-width: 768px) {
.textColor {
color: white;
}
}