Tips for Cross Browser Compatibility

Developing and designing for every browser type can be a very challenging (some might say impossible) task. Every browser has its own unique inherent styling that (even with the use of a reset) can be difficult to override or get rid of completely, and not every browser supports some of the newer, cool CSS properties and techniques. For these reasons, it can be really tricky to make sure that your site designs look good and consistent (and functional!) across every single browser. While accounting for cross browser compatibility can be a daunting task, it can be made easier by applying the following tips.

Use Vendor Prefixes

This one is probably the most common way to avoid cross browser compatibility issues. A lot of CSS properties (particularly the newer ones) aren’t supported on most browsers, unless you use a vendor prefix. As a developer, you may want to cover all your bases when using a CSS property that isn’t widely supported (like, for example, the transition property) to make sure that your designs (or in the case of the transition property, your animated effects) actually work in every browser. The following is a list of the vendor prefixes that can be used for every browser:

-webkit-   //chrome, android, safari, ios
-o-   //opera
-moz-   //firefox
-ms- //internet explorer

Here’s how you would use them in context:

div{
transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
}

Don’t forget to include hyphens on either side of your prefix keyword!

Browser Hacks

If you want to target a specific property or style rule to behave a particular way based on the browser, there are a number of different CSS “hacks” that will allow you to target a specific browser and apply style rules to HTML elements only if they appear on one particular browser. This works well when you’re trying to compensate for a style or property that might work on all browsers except for one. This way, you can use a hack to single out a specific browser and change the styling only for that one to make sure your design doesn’t look funky or your functionality isn’t compromised without the unsupported CSS property. Check out the list of hacks for common browsers below:

/* Internet Explorer Versions 9+ */
@<span class="hljs-keyword">media</span> screen and (min-width:<span class="hljs-number">0</span>\<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
font-size: 12px;
}
}

/* Firefox Versions 3+ */
<span class="hljs-selector-tag">html</span>><span class="hljs-comment">/**/</span><span class="hljs-selector-tag">body</span> <span class="hljs-selector-class">.<strong>yourElement</strong></span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:-moz-any-link</span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:default</span> {
<span class="hljs-attribute">font-size: 12px;</span><span class="hljs-meta">
</span>}

/* Chrome and Safari */
@<span class="hljs-keyword">media</span> screen and (-webkit-min-device-pixel-ratio:<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
<span class="hljs-attribute">font-size</span>: 12px;<span class="hljs-number">
</span>}
}

Make sure you insert the name of the element you’d like to single out in the spot where it’s written .yourElement in bold.

Use CSS @supports Rule

The CSS @supports allows you to wrap your CSS rules within the @supports query so that the rule will only be applied if it’s supported on a particular browser. If a rule isn’t supported, it’ll get skipped over as if the rule weren’t there, which can really come in handy for those properties you want to use but don’t want to look terrible if they happen to not be supported on a browser. Here’s how you would use it in context:

@supports(transition: all .5s ease){
div{
transition: all .5s ease;
}
}

In order to use @supports, you’ll have to pass through the CSS rule you want to account for as a parameter, and then the code will take care of the rest.

HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)

Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Personally I think a fullscreen good quality video that autoplays does increases engagement for the users/customers. It should be kept in mind that the story of the video must be relevant to the brand. These days we’re surrounded by loads of videos on social networks like FB and Twitter as well which autoplay (but is muted of course). Analytical studies have also reported higher engagement due to this.

Continue reading “HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)”

Hello world!

Hello from Yet Another Blogger! My name is Rishabh, a freelance web developer from India. I’ll use this blog to post some tips and tricks that I learn while working on various projects (personal or for clients). Some articles might also get into the details of several interesting topics, but I’ll try to keep them precise so that you can read quick, learn and get to work.

Quite excited about this!