12 Little-Known CSS Facts

1. The color Property Isn’t Just for Text
2. The visibility Property Can Be Set to “collapse”
3. The background Shorthand Property Has New Values
4. The clip Property Works Only on Absolutely Positioned Elements
5. Vertical Percentages are Relative to Container Width, Not Height
6. The border Property is Kind of Like Inception
7. The text-decoration Property is Now a Shorthand
8. The border-width Property Accepts Keyword Values
9. Nobody Uses border-image
10. There’s an empty-cells Property
11. The font-style Property Accepts a Value of “oblique”
12. word-wrap is the Same as overflow-wrap

For more details click below link

http://www.sitepoint.com/12-little-known-css-facts/

CSS Font-Size: em vs. px vs. pt vs. percent

Meet the units

1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

What is the difference 

Dynamic Div Height To Browser Window

I was trying it get a div to always be the height of the browser window and i finally got it to work with this code.

Set an article to 100% height 

Jquery

$('article') .css({'height': (($(window).height()))+'px'});
    $(window).resize(function(){
        $('article') .css({'height': (($(window).height()))+'px'});
    });

jsfiddle 

http://jsfiddle.net/Nitin_Grover/BPz7X/

Images with srcset

How srcset works

First implementation of srcset only lets us define a set of images for different pixel densities using resolution modifiers.

simply add the srcset attribute to an img element and at least one resolution modifier. The browser then display the most appropriate image from the available options. For example, the 2x modifier  targets the image to use if the display has a pixel density of 2 or higher.

<img src="hello.jpg" srcset="hello-2x.jpg 2x" />

Consclusion

Undoubtedly, srscet has a long way to go, but it's pressing forward in the right direction and helping us solve a problem. Overall, this will be a more intelligent way to serve our content images.

A future implementation of srcset will alloy us to load images based on the viewport size: 

<img src="hello.jpg" srcset="hello-2x.jpg 720w, hello-3x 1280w" />

Accordian using checkbox

HTML

<div class="schools_accordian">
<ul>
<li class="block">
<input type="checkbox" name="item" id="item1" />   
<label for="item1">Friends</label>
<ul class="options">
<li><a href="#">Find New Friends</a></li>
<li><a href="#">Poke A Friend</a></li>
<li><a href="#">Incinerate Existing Friends</a></li>
</ul>
</li>

<li class="block">
<input type="checkbox" name="item" id="item3" />   
<label for="item3">Galleries</label>
<ul class="options">
<li><a href="#">My Deviant Art</a></li>
            <li><a href="#">My Deviant Art</a></li>
            <li><a href="#">My Deviant Art</a></li>
</ul>
</li>
</ul>

</div>


CSS


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.schools_accordian{
    width: 100%;
}
ul {
list-style:none;
margin:0; 
padding:0;
width:100%;
margin:0 auto;

}

ul li label {
background: #575e63; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #33373d;
color: #fff;
text-shadow: 0 1px 1px #000;
letter-spacing: 0.09em;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575e63), to(#3f4347));
background: -webkit-linear-gradient(top, #575e63, #3f4347);
background: -moz-linear-gradient(top, #575e63, #3f4347);
background: -ms-linear-gradient(top, #575e63, #3f4347);
background: -o-linear-gradient(top, #575e63, #3f4347);
}

ul li input[type='checkbox'] {
display: none;
}

ul li label {
display:block;
padding:12px;
width:100%;
}

ul li label:hover {
background: #566f82; /* fallback colour */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566f82), to(#3e505e));
background: -webkit-linear-gradient(top, #566f82, #3e505e);
background: -moz-linear-gradient(top, #566f82, #3e505e);
background: -ms-linear-gradient(top, #566f82, #3e505e);
background: -o-linear-gradient(top, #566f82, #3e505e);
}

ul li input[type='checkbox']:checked ~ label {
background: #44c6eb; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #2799db;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#44c6eb), to(#2799db));
background: -webkit-linear-gradient(top, #44c6eb, #2799db);
background: -moz-linear-gradient(top, #44c6eb, #2799db);
background: -ms-linear-gradient(top, #44c6eb, #2799db);
background: -o-linear-gradient(top, #44c6eb, #2799db);
}

ul li input[type='checkbox']:checked ~ label span {
background: #2173a1; /* fallback colour */
border-top:1px solid #1b5f85;
border-bottom:1px solid #4cb1e4;
-moz-box-shadow: inset 0 0 5px #111;
-webkit-box-shadow: inset 0 0 5px #111;
box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
height: auto;
display:block;
min-height:40px;
max-height:400px;
}

ul ul {
background:#fff; margin:0; padding:0;
-moz-box-shadow: inset 0 2px 2px #b3b3b3;
-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
display:block;
padding:6px 12px;
color:#999;
text-decoration:none;
}

ul ul li a:hover {
color:#44c6eb;
}
ul ul li {
border-bottom:1px solid #ccc;
}

ul ul li:first-child {
padding-top:6px;
}

ul ul li:last-child {
padding-bottom:6px; border:0;
}

.options {
height: 0;
display: block;
overflow: hidden;

}


Live demo jsfiddle

Confused About REM and EM

REM can be confusing, specially without a solid understanding of its partner EM and their archvillain, the PX.

Relativer Units

Both rem and em are relative units, px is not. Before considering rem, its important to understand the relationship between em, markup and inheritance.

Save lives with EM

Well, maybe not lives, but it will save lines ... if code. The following examples do the same thing; update font sizes are padding within a media query. The initial values are calculated by incrementing 1em( 16px ) at a 1:1.2 ratio. You can choose different ration/scale and calculate your own values on TYPE SCALE.

EM Scale by updating our value Or recalulate every PX value

html{ font-size: 1em; } = html{ font-size: 16px; }

h1{ font-size: 2.074em; } = h1{ font-size: 33px; }

h2{ font-size: 1.728em; } = h2{ font-size: 28px; }

h3{ font-size: 1.44em; } = h3{ font-size: 23px; }

h4{ font-size: 1.2em; } = h4{ font-size: 19px; }

Conclusion

I use em for nearly everything, rem ocasionally for padding or margins, but only in a piinch, and px some times for borders.

Media Queries for Standard Devices

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}