Week 6

 Browser DOCTYPE switching What it means for you  – now is the time  CSS3 Web design for the 21 st Century

 Browser checks document for presence of DOCTYPE element  Complete strict DOCTYPE switches browser to Standards Mode  Complete transitional DOCTYPE switches browser to Almost Standards Mode  Incomplete, malformed or missing DOCTYPE switches browser to Quirks Mode

 Starting with IE 5 Mac, web browsers can display web pages in Standards Mode or Quirks Mode  Latest browser have added an Almost Standards Mode  Purpose: allow web browsers to display web pages designed with CSS practices from the non-Standards era without “breaking” them for the visitor t

 Browsers violate current CSS standards of formatting so as not break pages designed in the early 1990s  Internet Explorer 6, 7, 8 and 9 Quirks mode is basically IE 5.5 rendering mode Uses IE 5.5 Box Model  Other browsers use a variation on Almost Standards mode

 Browsers try to give the correct CSS specification as currently implement by the browser  Each browser may have different levels of implementation so Standards mode is never a single target  HTML5 calls this “no Quirks Mode”

 Firefox, Safari, Chrome, Opera (since 7.5), IE8 and IE9 have a mode that uses traditional vertical table cell sizing rather than a more rigorous CSS 2.1 implementation  Mac IE 5, Windows IE 6 and 7, Opera prior to 7.5 and Konqueror don’t have Almost Standards Mode since they never sized vertical table cells to the specification rigorously (their Standards Mode is similar to Almost Standards Mode of newer browsers)

 IE7 Mode IE8 and IE9 have a mode that is mostly a frozen copy of the mode that was the Standards mode in IE7. Other browsers do not have a mode like this, and this mode is not specified by HTML5.  IE8 Standards Mode IE9 has a mode that is mostly a frozen copy of the mode that was the Standards mode in IE8. Other browsers do not have a mode like this, and this mode is not specified by HTML5.  IE8 Almost Standards Mode IE9 has a mode that is mostly a frozen copy of the mode that was the Almost Standards mode in IE8. Other browsers do not have a mode like this, and this mode is not specified by HTML5.

 IE8 has 4 IE Rendering modes IE 5.5 quirks mode IE 7 standards mode IE 8 almost standards mode IE 8 standards mode  IE9 has 7 IE Rendering modes (the 4 above plus 3 new modes) IE 9 almost standards mode IE 9 standards mode XML mode

 Microsoft Internet Explorer 8 and 9 will use this element to switch to IE Rendering modes in addition to normal DOCTYPE switching  Normal DOCTYPE switching will be the default fall-back when there is no X-UA- Compatible header or element, Microsoft compatibility black-list or user enabled Compatibility View

CSS property allows you to embed fonts in web pages  Fonts are hosted on a web server and downloaded to the visitors computer  Must have proper license to do this  Some licenses are free  Not all fonts have a web font license Always check

@font-face { font-family: "Calibri"; src: url(" ri.ttf") format ("truetype"); } h1 { font-family: "Calibri", sans-serif; }

 Internet Explorer (all versions): EOT  Safari (3.2+): TTF / OTF  iPhone (3.1) SVG  Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010)  Firefox (3.5+): TTF/OTF (.WOFF added 3.6)  Opera (10+) TTF/OTF

@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }

 Fonts-SXSW/ 

 Still evolving specification  Specifications developed as modules that are separate and independent of each other  Allows for implementation by browsers when ready without waiting for other modules or for the finalized spec

 Use CSS3 for non-critical parts of the site design CriticalNon-critical BrandingInteraction UsabilityVisual Rewards AccessibilityFeedback LayoutMovement

PropertyExample border-radius.foo { border-radius: 10px; } text-shadow p { text-shadow: 1px 1px 2px #999; } box-shadow.foo { box-shadow: 1px 1px 2px #999; } opacity.foo { opacity: 0.5; /*.foo will be 50% transparent */ } Multiple background images body { background: url(image1.png) no-repeat top left, url(image2.png) repeat-x bottom left, url(image3.png) repeat-y top right; }

. foo { color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */ }  Allows for opacity in text colour

 Experimental support for a CSS3 module can be supported by using vendor prefixes  e.g. :.foo { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

BrowserPrefix WebKit -webkit- Mozilla -moz- Opera -o- Konqueror -khtml- Microsoft -ms- Chrome -chrome-