Friday, December 6, 2013

CSS Tricky Technique

CSS Tricky Technique:

Freinds I would like to share one CSS technique which helps you in scenarios where many developers left with no solution about browser compatibility:

When you develop a webpage to have  100% cross browser compatibility ,In some scenarios  you may come a cross some issues to make your page all browsers compatible ,and of course you do struggle with different style variations,alignments,..blah blah...  but even if you fail then What????

I am showing you the solution for that,its like if(Chrome) then what,if(Firefox) thenWhat...

You can use the below property which would affect specific to browsers.

For Mozilla

@-moz-document url-prefix() 
{
select {//write your style to affect only mozilla....ex: padding-top:10px;}
}



For Chrome,Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
ul#menu li a
{
//write your style to affect chrome,safari.... 
  padding: 29px 37px 6px 36.6px;
 /* This works only in Safari and Google Chrome */
}
}
 
But I would suggest you to use it when you would left with no option,first design your 
page with proper logic to work perfectly in all browsers.
 
Iff you become helpless even doing so then use the technique above, because unnecessary
 usage increase the code size Right?? 

any how it helps me a lot when I became  very helpless.

hope you enjoyed....


No comments: