By
inspiration: www.outdatedbrowser.com
There are various different approaches that can be taken when dealing with the issue of cross-browser compatibility. Add to that the proliferation of devices over recent years and it’s easy to see why developers sometimes feel they spend more time ironing out compatibility issues than creating engaging and rewarding online experiences.
Therefore, anything that helps developers out in this area is welcomed – and outdatedbrowser.com by Bürocratik has a created an out-of-the-box solution that you can add to any site to alert users that they are using an outdated browser, explain that their experience may be affected, and provide a link to the latest version of the browser they’re using. Their award-winning project website is pretty special as well.
TECHNIQUE
Expanding <div> effect on hover
HTML first
Links to the two stylesheets are established; ‘jquery.kwicks.css’ is for the universal styling required for any Kwicks slider and demo.css is for page specific styling. Each panel is a list item in an unordered list and content is placed and styled using <div>s. This demo uses SVG images deployed by declaring classes within <div>s – this is all explained in detail in the Technique section.
001 <link rel=’stylesheet’ type=’text/css’ href=’css/jquery.kwicks.css’ /> 002 <link rel=’stylesheet’ type=’text/css’ href=’css/demo.css’ /> 003 </head> 004 <body> 005 <div id=”header”><h1>Top 5 tea producing countries</h1></div> 006 <ul class=’kwicks kwicks-horizontal’> 007 <li id=’china’> 008 <div id=”percent”><h2>35.13%</h2>of global tea production<br />1,640,310 m/t</div> 009 <div class=”phoca-flagbox”><span class=”phoca-flag cn”></span></div> 010 <div id=”footer”><h3>China</h3></div> 011 </li> 012
Scripts
After the HTML for each panel, the scripts are loaded and the Kwicks function called. To match the Outdated Browser site, the maxSize for the active panel has been set to 36%. There’s scope to radically change the look by changing this value. The Kwicks plugin is capable of much more than what it’s used for here, and also works very well with different easing options. Refer to the ‘kwicks-master.zip’ for examples and more inspiration.
demo.css
The header is fixed to the top of the page with top:0 and position:absolute. Z-index brings it in front of the slide panels. The percent class sets the font-size and positioning of that element and is set to hidden. When hovered, its visibility is then set to visible.
The slider container
Minimum heights and widths are used to stop the layout from becoming ugly if the browser is reduced below the allowed for sizes. Setting height:100% to have the panel fill the page wouldn’t work here but height:100vh sets the <div> to 100% of the viewport height and works very well in all modern browsers.
001 .kwicks {
002 text-align:center;
003 min-width: 800px;
004 }
005 .kwicks > li {
006 height:100vh;
007 min-height: 440px;
008 }
009 </li>
Style the flags
The Outdated Browser site uses CSS sprites and uses a white version of the browser logo in the inactive state and a full-colour version on hover. This demo uses CSS-drawn images. The height and width of the flags can be set to any size. The panel background colour is also set here.
001 .phoca-flagbox {
002 width:120px;
003 height:120px;
004 display:inline-block;
005 position:relative;
006 }
007 .phoca-flag {
008 position:absolute;
009 top:0;
010 bottom:0;
011 left:0;
012 right:0;
013 margin:auto;
014 display:inline-block;
015 vertical-align:middle;
016 }
017 #china {
018 background-color:#ed553b;
019 }
020 .cn {
021 background:url(data:image/svg+xml; xx);
022 width:100%;
023 height:66.666666666667%;
024 background-size:100% 100%;
025 }
