Weitere ähnliche Inhalte Kürzlich hochgeladen (20) Progressive enhancement3. 1. Support all browsers with perfect fidelity
2. Support all browsers to some degree
3. Support newer, forget older
Thursday, November 4, 2010
10. <html lang="en" class=" js canvas canvastext
geolocation crosswindowmessaging websqldatabase
no-indexeddb hashchange historymanagement
draganddrop websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius
boxshadow opacity cssanimations csscolumns
cssgradients cssrelections csstransforms no-
csstransforms3d csstransitions video audio
localstorage sessionstorage webworkers
applicationcache svg smil svgclippaths fontface">
Chrome
Thursday, November 4, 2010
11. <html lang="en" class="js no-canvas no-canvastext no-
geolocation crosswindowmessaging no-websqldatabase
no-indexeddb no-hashchange no-historymanagement
draganddrop no-websockets no-rgba no-hsla no-
multiplebgs no-backgroundsize no-borderimage no-
borderradius no-boxshadow no-opacity no-
cssanimations no-csscolumns no-cssgradients no-
cssrelections no-csstransforms no-csstransforms3d no-
csstransitions fontface no-video no-audio localstorage
sessionstorage no-webworkers no-applicationcache no-
svg no-smil no-svgclippaths”>
IE8
Thursday, November 4, 2010
12. #br {
background-color: #111f;
color: #fff;
width: 450px;
padding: 10px;
loat: left;
}
.borderradius #br {
border-radius: 20px 20px 0 0;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
}
Thursday, November 4, 2010
13. #br {
background-color: #111f;
color: #fff;
width: 450px;
padding: 10px;
loat: left;
}
.borderradius #br {
border-radius: 20px 20px 0 0;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
}
Thursday, November 4, 2010
15. #shadow {
width: 450px;
padding: 10px;
loat: left;
border-bottom: 1px solid #666;
border-right: 1px solid #777;
}
.boxshadow #shadow {
border: none;
box-shadow: #666 3px 3px 6px;
-moz-box-shadow: #666 3px 3px 6px;
-webkit-box-shadow: #666 3px 3px 6px;
}
Thursday, November 4, 2010
16. #shadow {
width: 450px;
padding: 10px;
loat: left;
border-bottom: 1px solid #666;
border-right: 1px solid #777;
}
.boxshadow #shadow {
border: none;
box-shadow: #666 3px 3px 6px;
-moz-box-shadow: #666 3px 3px 6px;
-webkit-box-shadow: #666 3px 3px 6px;
}
Thursday, November 4, 2010
18. #alpha {
loat: left;
background: transparent url(images/iro.jpg) no-repeat 0 0;
position:relative;
}
#alpha div {
background-color:#FFF;
position:absolute;
}
.rgba #alpha div {
background-color: rgba(255,255,255, .7);
}
Thursday, November 4, 2010
19. #alpha {
loat: left;
background: transparent url(images/iro.jpg) no-repeat 0 0;
position:relative;
}
#alpha div {
background-color:#FFF;
position:absolute;
}
.rgba #alpha div {
background-color: rgba(255,255,255, .7);
}
Thursday, November 4, 2010