Responsive Meta Tag !

Meta Tag

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 or older doesn’t support media query. You can use media-queries.jsor respond.js to add media query support in IE.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Meta tag for Mobile site

To ensure proper rendering and touch zooming, add the viewport meta tag to your

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don’t recommend this on every site, so use caution!

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

Text Blink

* Text Blink

<style>
#Blinker {
display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left;
}

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-moz-animation-play-state: paused;
}

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-webkit-animation-play-state: paused;
}

</style>

<div id=”Blinker” >Text to blink here</div>

Sprite Image

Beautiful Buttonaad-ban

button

The best practice is to combine all button states into one image and divide them out using CSS. This is because it:

  • reduces http requests resulting in faster transfers
  • prevents flickering effect caused by change of state by loading all states as one file

The CSS Code

Now that we’ve brought the different states into a single image we need to tell the browser what part of the image we want when necessary through CSS.

The static, initial state of the button is defined in CSS as follows:

a.button {
	background: url(../images/button.png) no-repeat 0 0;
	width: 186px;
	height: 52px;
	display: block;
	text-indent: -9999px;
}

The background image is positioned to the top and left with the width and height of the button being defined as to only show the top third of the sprite. The rest of the code is a simple image replacement technique on the <a> tag that has a class of ‘button’.

Hover State CSS

The hover state retains all properties and values with the exception of the background position as it’ll need to be pushed up to show the second part of the sprite as shown:

a.button:hover { background-position: 0 -52px; }

Changing the first value would result in the background image moving left and right along the X axis. Obviously we don’t want that so the image is moved upwards along the Y axis as a negative value of the height of the button itself. This moves the hover state of the sprite into view when the mouse hovers over the link.

Click State CSS

As you can probably guess the click state will basically be the same but moving the button up again as follows:

a.button:active { background-position: 0 -104px; }

aad-ban1

All Browser CSS Hack

aad-ban

<style type=”text/css”>
.ie .example {background-color: yellow}
.ie7 .example {background-color: orange}
.gecko .example {background-color: gray}
.win.gecko .example {background-color: red}
.linux.gecko .example {background-color: pink}
.opera .example {background-color: green}
.konqueror .example {background-color: blue}
.webkit .example {background-color: black}
.example {width: 100px;height: 100px;}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

<script type=”text/javascript” charset=”utf-8″>

function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g=’gecko’,w=’webkit’,s=’safari’,o=’opera’,m=’mobile’,h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?(‘ie ie’+RegExp.$1):is(‘firefox/2′)?g+’ ff2′:is(‘firefox/3.5′)?g+’ ff3 ff3_5′:is(‘firefox/3.6′)?g+’ ff3 ff3_6′:is(‘firefox/3′)?g+’ ff3′:is(‘gecko/’)?g:is(‘opera’)?o+(/version\/(\d+)/.test(ua)?’ ‘+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?’ ‘+o+RegExp.$2:”)):is(‘konqueror’)?’konqueror’:is(‘blackberry’)?m+’ blackberry’:is(‘android’)?m+’ android’:is(‘chrome’)?w+’ chrome’:is(‘iron’)?w+’ iron’:is(‘applewebkit/’)?w+’ ‘+s+(/version\/(\d+)/.test(ua)?’ ‘+s+RegExp.$1:”):is(‘mozilla/’)?g:”,is(‘j2me’)?m+’ j2me’:is(‘iphone’)?m+’ iphone’:is(‘ipod’)?m+’ ipod’:is(‘ipad’)?m+’ ipad’:is(‘mac’)?’mac’:is(‘darwin’)?’mac’:is(‘webtv’)?’webtv’:is(‘win’)?’win’+(is(‘windows nt 6.0′)?’ vista’:”):is(‘freebsd’)?’freebsd’:(is(‘x11’)||is(‘linux’))?’linux’:”,’js’]; c = b.join(‘ ‘); h.className += ‘ ‘+c; return c;}; css_browser_selector(navigator.userAgent);
</script>

</head>

<body>

<div></div>
</body>

aad-ban1