It's just a fact that Chrome is the best browser. It supports the most features, is always on the cutting edge, usually runs effects/transitions better (hence the mega amount of RAM it uses), and is very forgiving/smart.
Hence, I've decided to add this to my applications when I can:
That's just a GIF but on the live sites, I set it up to where when a person hovers over the phrase, the animation kicks in, then reverts on hover-out. I'm using a font-awesome icon and a JavaScript library called bowser to detect Chrome. Code looks like this:
HTML:
<div class="browser-message" style="display:none;"><br>
<em>
The developer thanks you for using
<div id="chrome-hover">
<span>Chrome</span>
<i class="fa fa-lg fa-chrome"></i>
</div>
</em>
</div>
CSS:
.browser-message { font-size: 20px; }#chrome-hover { display: inline-block; background-color: #fff; transition: all 0.8s ease; overflow: hidden; width: 31px; position: relative; top: 13px; height: 35px; } #chrome-hover span { position: absolute; z-index: 0; left: 0; } #chrome-hover i { padding: 2px 3px 2px 2px; position: relative; background-color: #fff; z-index: 1; left: 0; -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transform: rotate(0deg); left: 0px; transition: all 0.8s ease; } .browser-message:hover #chrome-hover { width: 102px; } .browser-message:hover #chrome-hover i { -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); left: 72px; }
JavaScript:
$(function(){ if(bowser.name == 'Chrome'){ $('.browser-message').show(); } });
Simple as that. Thank your users!