Transcript Lecture

Week 6
 Browser
DOCTYPE switching
• What it means for you
 Typography
• @font-face – now is the time
 CSS3
• Web design for the 21st 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
 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-UACompatible header or element, Microsoft
compatibility black-list or user enabled
Compatibility View
CSS property allows you to
embed fonts in web pages
 @font-face
 Fonts
are hosted on a web server and
downloaded to the visitors computer
 Must
have proper license to do this
 Some
 Not
licenses are free
all fonts have a web font license
• Always check
@font-face {
font-family: "Calibri";
src:
url("http://www.example.com/fonts/calib
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'); }
Or
@font-face { font-family: 'Graublau Web'; src:
url('GraublauWeb.eot'); src: local('☺'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype'); }
 http://www.w3.org/Talks/2010/0313-
Fonts-SXSW/
 http://www.miltonbayer.com/font-face/
 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
Critical
Non-critical
Branding
Interaction
Usability
Visual Rewards
Accessibility
Feedback
Layout
Movement
Property
Example
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;
}
Browser
Prefix
WebKit
-webkit-
Mozilla
-moz-
Opera
-o-
Konqueror
-khtml-
Microsoft
-ms-
Chrome
-chrome-