Tuesday, 21 October 2014

CSS Media Queries for All Devices and Browsers (Including IE7 and IE8)

In CSS3, web developers/designers can define a media type such as screen or print, and specify the look of the content by setting conditions such as width, height, or orientation. A CSS media query combines a media type and a condition that shows how web content will appear on a particular device.
CSS Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, CSS media queries expand the role of the media attribute that controls how your styles are applied. For example, it’s been a common practice for years to use separate style sheet for printing web pages by specifying media=”print”.
CSS Media queries take this idea to the next level by allowing developers target styles based on a number of device properties, such as screen width, orientation, and so on. Following table demonstrates CSS media queries for all browsers in action. They all show the same web page as it’s viewed in a desktop browser, tablet or an iPod touch.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Media Queries Support

CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on smartphones and other screen-based devices.
Although older versions of IE don’t support media queries, still there is a way you can make it work.
Even though everyone thinks that earlier versions of IE are already extinct, there is a great amount of people using them, her are some stats:
1Chrome 3724.85%
2Safari 710.60%
3Firefox 328.03%
4Internet Explorer 117.31%
5Chrome 365.62%
6Android 43.94%
7Firefox 313.91%
8Internet Explorer 83.66%
9Internet Explorer 93.08%
10Internet Explorer 102.34%
Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE.

Here is a great jQuery plugin called css3-mediaqueries. It’s very easy to use.
Download jQuery plugin and include downloaded script just before the </body> like this:
1

<script src="js/css3-mediaqueries.js"></script>
Or you can use the following way to include the script.
1
2
3
4

<!-- css3-mediaqueries.js for IE less than 9 -->
<!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Then write media query in style sheet and check it in IE. It will work nicely with IE8, IE7, even in older versions IE6 or IE5.

Notes

It doesn’t work on @import’edstylesheets
Write media query the following way:
1
2
3
4

@media screen and (min-width: 980px)
{
/* CSS Document */
}
Use keyword ‘and’ in query (‘or’ is not supported).
One thing must be noted is that the “screen” is necessary:
1
2

@media (min-width: 481px) { /* ... */ } will not work, it must be
@media screen and (min-width: 481px) { /* ... */ }
* * *
Thats’s it, if you have some other ideas on how to use CSS media queries feeel free to drop your ideas in the comments below. Have a great day.
Posted by at No comments:

Hidden Flyout Shopping Cart Menu with CSS3

HTML:-

 
<div id="wrapper">
  <div class="cart-tab visible">  
    <a href="#" title="View your shopping cart" class="cart-link">
      <span class="amount">$22.00</span>
      <span class="contents">2 items</span>
    </a>
    <div class="cart">
      <h2>Cart</h2>
      <div class="cart-items">
        <ul>
          <li class="clearfix">
            <img src="img/dark-clean-hoodie.jpg" class="productimg">
            <h4>Dark Hoodie</h4>
            <span class="item-price">$11.00</span>
            <span class="quantity">Quantity: 1</span>
          </li>
 
          <li class="clearfix">
            <img src="img/spongebob-nike-shoes.jpg" class="productimg">
            <h4>SpongeBob Shoes</h4>
            <span class="item-price">$11.00</span>
            <span class="quantity">Quantity: 1</span>
          </li>
        </ul>
      </div><!-- @end .cart-items -->
 
      <a href="#" class="checkout">Go To Checkout →</a>
    </div><!-- @end .cart -->
  </div><!-- @end .cart-tab -->




CSS:-




/** page structure **/
#wrapper {
  display: block;
  width: 850px;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 35px;
  padding: 25px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(205,205,205,0.55);
}
 
 
#productlist {
  display: block;
  margin-bottom: 15px;
}
 
#productlist li {
  display: block;
  float: left;
  margin-bottom: 35px;
}
 
#productlist li img {
  display: block;
  float: left;
  margin-right: 10px;
}
#productlist li .details {
  display: block;
  float: left;
  width: 180px;
}


















/** flyout menu **/
.cart-tab { 
  width: 22em;
  position: fixed;
  top: 5em;
  z-index: 9999;
  background: #fff;
  right: -22em;
  -webkit-transition: right ease .5s;
  -moz-transition: right ease .5s;
  -o-transition: right ease .5s;
  transition: right ease .5s;
}
 
.cart-tab a.cart-link {
  position: absolute;
  top: 0;
  left: -9em;
  width: 8.6em;
  display: block;
  background: #fff;
  padding: 1.8em;
  text-decoration: none;
  -webkit-transition: left ease .5s;
  -moz-transition: left ease .5s;
  -o-transition: left ease .5s;
  transition: left ease .5s;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.cart-tab a.cart-link:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -10px;
  width: 10px;
  height: 100%;
  background: #fff;
}
 
.cart-tab:hover { right: 0; }














.cart-tab a.cart-link .amount { 
  display: block; 
  color: #515151; 
  font-size: 1.5em; 
  line-height: 1.7em; 
  font-weight: bold; 
  margin-bottom: 8px;
}
.cart-tab a.cart-link .contents { 
  display: block;
  color: #666;
  font-size: 1em;
}
 
.cart-items { display: block; margin-bottom: 25px; }
.cart-items ul { display: block; list-style: none; }
.cart-items ul li { display: block; margin-bottom: 8px; padding-bottom: 10px; cursor: pointer; border-bottom: 1px dotted #888; }

.cart-items ul li .item-price, .cart-items ul li .quantity { display: block; margin-bottom: 2px; font-size: 1.1em; }
.productimg { display: block; float: left; margin-right: 8px; }
 
.cart-tab .cart { padding: 1.5em; margin: 0; }
.cart-tab .cart .checkout {
  font-size: 1.2em;
  padding: 4px 11px;
  border: 1px solid #467fc5;
  color: #467fc5;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.cart-tab .cart .checkout:hover { background: #467fc5; color: #fff; }

.cart-tab a.cart-link,.cart-tab .cart {
  -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  -o-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}
 
.cart-tab .cart {
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-bottomright: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
Posted by at No comments:
Subscribe to: Posts (Atom)