Transcript of Week 6. Browser DOCTYPE switching What it means for you Typography @font-face – now is the time ...
- 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-