CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 6 CSS3Feb 3, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Thursday, February 3, 2011References2HTML5 & CSS3 Develop with Tomorrow's Standards Today, Hogan, Pragmatic ProgrammersVarious Web pages as indicated on individual slidesThursday, February 3, 2011New/Improved Features in CSS33Bordersborder-colorborder-imageborder-radiusbox-shadowBackgroundsbackground-origin and background-clipbackground-sizemultiple backgroundsColorHSL colorsHSLA colorsopacityRGBA colorsText effectstext-shadowtext-overflowword-wrapUser-interfacebox-sizingresizeoutlinenav-top, nav-right, nav-bottom, nav-leftSelectorsattribute selectorsBasic box modeloverflow-x, overflow-yGenerated ContentcontentOthermedia queriesmulti-column layoutWeb fontsspeechThursday, February 3, 2011Sources: http://www.css3.info/preview/Some Pseudo-classes4:nth-of-typep:nth-of-type(2n+1){color: red;}Finds all n elements of a certain type.:first-childp:first-child{color:blue;}Finds the first child element.:nth-childp:nth-child(2n+1){color: red;}Finds a specific child element counting forward.:last-childp:last-child{color:blue;}Finds the last child element.:nth-last-childp:nth-last-child(2){color: red;}Finds a specific child element counting backward.:first-of-typep:first-of-type{color:blue;}Finds the first element of the given type.:last-of-typep:last-of-type{color:blue;}Finds the last element of the given type.:afterspan.weight:after { content: "lbs"; color: #bbb; }Used with content to insert content after the specified element.Thursday, February 3, 2011last-childExample5tr:last-child{ font-weight: bolder;}td:last-child{ font-weight: bolder;}tr:nth-last-child(2){ color: green;}tr:nth-last-child(-n+3) td{ text-align: right;}tr:last-child td:last-child{ font-size:24px;}Thursday, February 3, 2011IE again6IE 8 and earlier does not support css selectors So another workaround selectivizr.jshttp://selectivizr.com/<script type="text/javascript" src="[JS library]"></script><!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript><![endif]-->Use with jQuery or other libraryThursday, February 3, 2011Media Queries7widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangridSelect CSS based on media featuresThursday, February 3, 2011Media in link8<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>SizeDetect</title> <link rel="Stylesheet" href="ipad.css" type="text/css" media="screen and (max-device-width: 768px)"/> <link rel="Stylesheet" href="phone.css" type="text/css" media="screen and (max-device-width: 320px) "/></head><body><p>Red = phone, Blue = iPad, Black = desktop</p></body></html>p { color: red }phone.cssp { color: blue; font-size: 3em; } ipad.cssThursday, February 3, 2011max-device-width gives an upper bound on the actual device-width. Any device with a smaller width will match so the iphone matches max-device-width: 768px. The last style sheet that matches overrides properties set in previous oneDevice-width9<link rel="Stylesheet" href="ipad.css" type="text/css" media="screen and (device-width: 768px)"/><link rel="Stylesheet" href="ipad.css" type="text/css" media="screen and (min-device-width: 700px)and (max-device-width: 768px"/>device has exactwidth 768pxdevice has width between700 and 768pxpx = CSS pixels not physical pixels Thursday, February 3, 2011In CSS file10<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>SizeDetect</title> <link rel="Stylesheet" href="example.css" type="text/css"/></head><body><p>Red = phone, Blue = iPad, Black = desktop</p></body></html>@media (device-width: 768px) { p {color: blue; font-size: 3em; } }@media (device-width: 320px) { p {color: red; } }example.cssThursday, February 3, 2011How to detect iPhone 411@media (-webkit-min-device-pixel-ratio: 2) { p {color:yellow}}In CSSThursday, February 3, 2011iPhone 4 has a high resolution screen. People want to identify it to use better images, etc.Orientation12<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Orientation</title> <link rel="Stylesheet" href="orientation.css" type="text/css"/></head><body><p>Red = landscape, Blue = portrait</p></body></html>@media (orientation: landscape) { p {color: red; font-size: 3em; } }@media (orientation: portrait) { p {color: blue; } }orientation.cssThursday, February 3, 2011Android13Thursday, February 3, 2011Loading CSS based on user agent14<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>SizePlatform</title> <script lang="javascript"> var loadCSS = function(file) { var link = document.createElement('link'); link.href = file; link.rel = 'stylesheet'; link.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(link); }; </script></head><body onload=" if (navigator.userAgent.match(/iPhone/i)) { loadCSS('iphone.css'); } else if (navigator.userAgent.match(/iPad/i)) { loadCSS('ipad.css') } else if (navigator.userAgent.match(/Android/i)) { loadCSS('android.css') }"><p>Red = phone, Blue = iPad, Android = Yellow</p></body></html>Thursday, February 3, 2011User agent15<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>User Agent</title></head><body onload="alert(navigator.userAgent)"><p></p></body></html>Thursday, February 3, 2011One Css file, Different CSS classes16.ipad p { color: blue; font-size: 3em; }.iphone p { color: red; }.android p { color: yellow; }Thursday, February 3, 2011One Css file, Different CSS classes17<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>CSSClass</title> <link rel="Stylesheet" href="joint.css" type="text/css"/> <script type="text/javascript"> var cssclass = "desktop"; if (navigator.userAgent.match(/iPhone/i)) { cssclass="iphone"; } else if (navigator.userAgent.match(/iPad/i)) { cssclass="ipad"; } else if (navigator.userAgent.match(/Android/i)) { cssclass="android"; } document.documentElement.className += ' ' + cssclass;</script></head><body><p>Red = phone, Blue = iPad, Android = Yellow</p></body></html>Thursday, February 3, 2011Android User Agent18Android supports many screen sizes100+ Android tablets
View Full Document
Unlocking...