Slide 1

Week 6

Slide 2

Browser DOCTYPE switching What it means for you Typography @font-face now is the time CSS3 Web design for the 21 st Century

Slide 3

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

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

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 dont 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)

Slide 8

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.

Slide 9

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

Slide 10

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

Slide 11

@font-face 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

Slide 12

@font-face { font-family: "Calibri"; src: url("http://www.example.com/fonts/calib ri.ttf") format ("truetype"); } h1 { font-family: "Calibri", sans-serif; }

Slide 13

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

Slide 14

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

Slide 15

http://www.w3.org/Talks/2010/0313- Fonts-SXSW/ http://www.miltonbayer.com/font-face/

Slide 16

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

Slide 17

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

Slide 18

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; }

Slide 19

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

Slide 20

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; }

Slide 21

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