I haven’t had a chance to post here much lately since I’ve been coding another web site with lots of bells & whistles in my free time. It’s always fun taking advantage of the latest CSS features by peppering sites with unexpected effects, but whenever you leave the normal world of everyday ho-hum computing and try to implement techniques not seen as often, you quickly discover why most people don’t bother trying to make this stuff work. Each browser has its own quirks for what CSS features it will implement fully or partially, and making matters worse, none of the major web browsers can agree on a standard way to do some pretty basic things like, you know, how to measure a pixel or render a font. Luckily, we can employ Media Queries in CSS to change settings for specific browsers, so that people with browsers that Just Work (Chrome) don’t have to miss out on cool effects that aren’t supported (or render differently) in the other browsers. Let’s stop coding to the least common denominator!
If you want to target only Mozilla’s Firefox, you do something like this:
@-moz-document url-prefix() {/* Firefox styles go here because Mozilla apparently has trouble with pixels! */blockquote p:first-letter {margin: 4px -1px 0 -5px;}}
This is copied & pasted from a stylesheet where I styled a blockquote to increase the size of the first letter to be really big, like you see in old books. In Chrome it looked great, lining up the top of the letter with the top of the line, using a margin setting of -15px 2px 0 -5px, but in Firefox it was too far away from the text on the side, and stuck up way too high above the line, so I needed to target Firefox specifically using the above code. As I discovered additional tweaks needed for Firefox (especially in relation to how differently it renders fonts) I continued to put them inside of the above media query, which goes at the end of the main stylesheet (style.css in WordPress).
Then there’s Microsoft’s Internet Explorer. Specifically, I was testing on IE11. While that browser also had its own interpretation of where the above p:first-letter should appear, that wasn’t quite as ugly (that margin setting had to be -10px 1px 0 -5px). What really drove me to set up a separate media query to target just IE10 and IE11 was when I started using 3D Transoforms. IE kind of tries to make it work, but it can’t quite get it, resulting in an ugly result, while other browsers looked great. The effect I was going for was a hyperlink hover effect, where when you hover over a hyperlink the word appears to roll up into a different color, etc. Apparently this just doesn’t work in IE11, so rather than turn it off for everybody, I simply disabled it for IE users by targeting just that browser and defined different styles for the elements I placed within that query. For example:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {/* IE10-11 CSS styles go here because Microsoft can't make a browser that understands 3D transforms! */.blog a:hover{color: rgba(85, 26, 139, 0.5);}
By using media queries to target specific browsers you can easily modify any styles that aren’t rendering the way you’d like. Sometimes I just change some values, like in the margin changes for Firefox, and other times I remove the effect entirely like I did for IE. (BTW, Microsoft’s Edge browser that comes with Windows 10 finally does seem to work with 3D transofrms now, as Chrome has for years…)