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