WWDC2004 Session 419

Transcript

Kind: captions
Language: en
all right good morning welcome to
session 419 who's
title is best practices in website
development but whose unofficial and I
think more interesting title is building
visually compelling web pages for Safari
as well as other WebKit applications so
today I'm going to be talking about how
you can get the most out of WebKit
technology how you can use a rich
standard support to produce smaller
faster well design web pages that will
not only look great in safari and other
WebKit apps but it will also work well
in other browsers so who are the primary
consumers of WebKit technology well the
first and most obvious target audience
is the website author so in the first
portion of the talk I'm going to be
outlining some best practices in website
development that you can use when
designing websites that you want to work
in as many browsers as possible in
addition some of you may be developing
applications that use web kit and may be
interested to learn what kinds of things
you can do when you're free of the cross
browser constraint and then finally some
of you may have come from the dashboard
session earlier this morning and may be
interested in learning what kinds of
tips and tricks you can use to make your
widgets look really cool so towards the
end of the talk i'll be covering some of
the WebKit specific enhancements that
we've made that you can take advantage
of when building your widgets so what
I'm going to cover in order I'm going to
start by talking about web standards
what they are and why it's so important
to adhere to them when designing
websites for deployment in multiple
browser environments next I'm going to
talk about how to use standards well in
particular how to use CSS to separate
the presentation of your website from
your website structure and I'm going to
demonstrate how doing so will result in
smaller faster and more easily
maintainable websites then I'm going to
get into some technical details and
cover some basic styling techniques
modern CSS techniques that work in most
browsers and then I'm also going to
cover some cutting-edge techniques that
work in WebKit but that more importantly
also degrade gracefully and browsers
that don't support those features and
then finally I'm going to cover some of
the extensions that we've made to WebKit
for you widget authors and WebKit app
developers so what are web standards and
why are they so important
well web standards are a set of
recommendations released by an
organization called the w3c and what web
standards define are the rules that
browsers should use that they should
adhere to when they're parsing and
rendering HTML and the reason these
standards are so important is they
basically provide a way of ensuring
interoperability among all of the
browsers that support the standards so
the idea is that you can write once and
expect your code to work just work on
all of the browsers that that support
those standards now in an added benefit
of standards you'll find that if you use
them well you're going to end up with
smaller and faster web pages in all
modern browsers so the most obvious and
well-known specification of course is
HTML the primary language of the web
today but in order to achieve Richard
presentational capabilities in HTML as
well as to achieve more dynamic effects
or more complex behavior there are some
other specifications that you should be
familiar with and the first of these is
CSS or cascading style sheets and what
CSS is is a language separate from HTML
but include a bowl in HTML files that
defines rules for how to define the look
of your website or the theme of your
website so you can do things like set
the font color size weight set
background and foreground colors and
images and you can define the entire
layout of your page as well you know
that where elements go and how big they
are and this is a spec that's been
around for a while nearly ten years and
the first version of it CSS one is
actually very well supported in all
modern browsers now a second revision
was released a few years later and this
spec actually added a lot of cool new
features but unfortunately there were a
lot of ambiguities in the spec a lot of
holes so when browser makers tried to
implement the specs they ran into issues
of having to sort of fill in gaps and
expect and so there were
interoperability problems as browsers
made different choices and their
interpretations so Latin that led to CSS
working group to reduce revision 2.1 and
this is the the sort of definitive CSS
spec if you will this cleared up a lot
of the ambiguities finally to find how a
lot of the cool new features in CSS were
in phases to work
even drop CSS two features that no
browser make your ad ever bother to
implement so if you're looking to see
what safari supports this is the
definitive spec to read to find out how
a WebP it's going to behave when you use
CSS now in addition css3 is in
development at the w3c and although it's
not yet a standard Safari actually
supports many css3 properties and we've
added even more support for css3 in the
beta in tiger so I'll be covering some
of the highlights of us before E css3
support later in the session now another
specification that you should be
familiar with for achieving dynamic
effects on your web page is the document
object model or dom for short and what
the dom is is a collection of api's that
are accessible both from javascript in
your web pages and now also from
objective-c in the latest WebKit beta
and this API allows you to walk the
structure of your page as a tree view so
you can iterate over the nodes in your
page and look at element names attribute
names and values and even query for
style information in the latest WebKit
beta now in addition the dom is not just
a read-only api it's completely dynamic
so you can actually change all this
information on the fly so you can depend
nodes remove nodes change attribute
names or values or dynamically change
style information and those effects will
will take place in real time as you make
those changes in your web page so the
dom is a great way to achieve very
dynamic and complex behavior now like
CSS it's been around for a long time
before there was even a Dom standard
there was an informal collection of API
that you could use to do some of these
things and so that's sort of been
informally known as Dom level 0 and then
over the years there have been three
revisions to the Dom spec refining the
behavior adding better traversal
mechanisms and support for custom events
and in addition there are also a lot of
popular Dom extensions that have never
found their way into any standard and
Safari actually supports many of those
examples are the content editable
attribute to do in page editing as well
as methods for querying for the size and
position of elements on your page
so I've talked about what the big three
standards are Dom CSS and HTML and why
it's important to follow them now let's
talk for a moment about how you tell the
browser that you even want to adhere to
web standards so by default if you leave
off this special tag that you can put at
the top of a document called a called a
doc site tag the browser's going to
assume that you're you're sort of an
old-style web page that you're a legacy
page and that you aren't really
supporting modern standards and what
browsers are going to do is they're
going to go into they're essentially
worst mode of rendering a compatibility
or quirks mode and what you're going to
find if you leave the stock type off in
your web pages is that the various
quirks from the browsers actually are
not going to be the same some browsers
are much quicker than others so what
you'll find is that you make tests in
one browser and to inadvertently trigger
quirks that you didn't even know about
in another browser so by putting this
doctype in your webpages up front and
most importantly specifying a modern
version of HTML specifically HTML 4 or
higher or XHTML one or higher you're
going to let the browser know that your
modern standards compliant page and
you're going to trigger the browser's
strictest mode of rendering and this is
really important because all of the
browsers will go into strict mode with
this sort of doctype that I have on the
slide behind me and when they do so the
rendering of the browsers that differs a
lot less so this is just something that
you can do to not only make sure that
when you read expecting and try the
feature out it actually works the way
the spec says but it'll also guarantee
that your site will hopefully just work
when you bring it up in browsers that
you never tested it in before so let's
say you've got this old-style website
that's just HTML and you're trying to
you know modernize it bring it up to
date so you've put the doctype in and
triggered strict mode well one of the
things is going to happen when you when
you put that doc type in is the
browser's going to get a lot more
draconian and it's error handling it's
going to get a lot less tolerance of
stupid mistakes that you make in your
website and so the onus is going to be
on you as the website developer to check
your web page for errors and there are
online tools at the w3c called
validators that can do this for you
and there's both HTML and CSS validators
and what they do is take your CSS and
HTML files as inputs I know they'll
print out a list a nice list of all the
errors when where they occurred in your
file so if they catch things like you
know unclosed quotes or miss balance
tags or bad tag nesting so if you run
your site through a validator you can
basically ensure that it's structurally
correct and minimize the number of
errors in the page now the problem is if
you don't do this is we run the risk of
having this error in your page and of
course we wouldn't have a web browsers
just crashed every time you made an
error so browsers are going to try to
second-guess you and try to figure out
what what it was that you really meant
but there's an infinite number of errors
that you can make in a web page and so
it's impossible that the error recovery
rules for any two browsers is going to
be the same so again if you leave these
errors in the page you run the risk that
your site's going to render differently
in the various browsers as they recover
from your errors in different ways so
make sure you validate your code up
front now it's worth noting that
validators can be a bit pedantic as far
as their reporting of errors so I'm not
going to stand up here and say that your
sites have to be one hundred percent
valid according to HTML and CSS but you
should eliminate the more egregious
errors up front use validators with a
dash of common sense and at least make
sure you have a well-formed Dom tree and
stuff like that and so on the slide
behind me now I have documentation links
to both the CSS and the Dom
specifications so again you can go here
and look at the Dom level to spec to see
what Safari supports and look at the CSS
2.1 spec to get a feel for what Safari
sportsman CSS and then the validator
links are up here as well for both CSS
and Marco so let's say you've got this
old style website you've now put the
doctype in and triggered strict mode and
you run it through a validator and
you've eliminated all the errors so now
you have a site that technically
speaking is correct it's well-formed
there are no mistakes in it but you
haven't started using any CSS yet in
particular all of your look is still
achieved through old-style HTML tags
because HTML was around before CSS a lot
of present
features crept into the language before
CSS came into existence there's a lot of
presentational tags and attributes whose
sole purpose in HTML to supply this
presentational information and they said
nothing about what your website actually
should be structured like they're just
there to achieve an appearance and
examples of these tags are the font tag
for doing font colors and sizes the bold
and italic tags and in various
attributes like the width and height
attribute and in colors and background
colors now why is this presentational
markup bad in your website well for one
thing when you intermingle the
presentational mark up with your
structural markup you're effectively
hard coding your presentation if you
find that you want to make any changes
to the presentation you'll have to get
in there when this intermingled markup
and make changes and you might
inadvertently introduced a structural
error and in the opposite is also true
maybe you're just wanting to change your
site structure but it's hard to even
tell what the structure is because the
presentational tags are in the way and
you might even introduce presentational
errors when you're just trying to change
your website structure in addition you
can't define multiple looks for your
site there's no way to actually
effectively seem your site because the
presentation is is mixed in with the
mark-up and finally you this this
presentational markup is is a waste of
bandwidth because a frequently you'll
have similar constructs on a web page
like for example the the links in a
navbar and maybe you're relying on a
complex appearance with table cells and
images or whatever and you end up using
a lot of presentational markup / link
what happens if you always use this to
this markup is it'll be duplicated in
every construct on the page so if you
have ten links in your navbar maybe you
have 50 you know 50 or 60 pieces of
presentational markup but are all
duplicated along with those links so
this results in really really large web
pages and it's a waste of server
bandwidth which will cost you money when
running your website and of course this
will results an inferior performance in
any modern browser because a web page
that's larger that has a bigger Dom tree
is going to take longer to parse and
longer to render so to really hammer
this point home let's actually look at
an example and the example I've chosen
as a typical weblog article I think a
web blogs a very rep
example because a prolific blogger might
have as many as 100 of these blog
articles you know on their front page
and we're even going to assume that a
blog article is simpler than they often
are we're just going to say it has three
pieces of information a header which is
like the title of the article for date
which is when it was posted and then the
content of the of the article and what
we want to achieve is a layout or
appearance that that I put up on the
slide behind me we want to slightly
larger bold title in a different color
and then we we have a different font for
the date and we want the date on the far
right the title you know up on the far
left and then the text of the article
slightly indented in underneath so this
is the layout we're shooting for so
let's look at how we might do this you
know using old style markup so you
probably can't even read this because
there's so much of it I mean it's just
it's just a sea of bad markup you have
your table cells used to do spacing you
have alignment attributes on the table
self to push things to the left and
right we needed multiple tags the font
tag in the be tagged just to make the
header bold and maroon further for the
title and if I hadn't highlighted the
three relevant pieces of structural
information the title the date and the
text it would have been hard to even see
where they were in this web page so if
you wanted to make Shay make changes to
the structure look at how hard it would
be because you just be you know messing
around with this sea of presentational
Marco so now let's look at a good
example in this example just ignore the
CSS for a second and look at the HTML
and look at how much easier it is to
read and look at how what it represents
is exactly the structure of your website
your you can think of your weblog as a
you know container for a bunch of
articles each article is a container
that has exactly three pieces of
information a title a date and a body
and you can see that it's very easy to
locate these pieces of information and
if you wanted to make structural changes
to your website it's fairly trivial if
you move to this model and now let's
look at the CSS so the CSS is where we
put the presentational information so
for example the title we've put in a
different font give it a larger font
size made it bold and we've even said
where it goes we added the float left to
say that it should sit in the
our left and we did that all with just
one rule that can be used by all the
blog articles on the page and you can
see that there are similar single rules
for the date and the body basically it
you know you in chi ving a layout that
we want and these two layouts basically
look exactly the same but this one the
load about three or four times faster
and in a web browser in any web browser
you triton so good example observations
well first of all it's just playing
easier to read if you have to get into
either the presentational side of your
website or the structure of your website
it'll be a lot easier to read and
therefore a lot easier to maintain
information is shared because the rules
in CSS can be applied to all of the
articles on the page you don't have the
problem of duplicating a bunch of
presentational markup so those single
rules apply to each article and that's
going to result in better performance
now even more importantly CSS can be
reused across pages on your site a
typical weblog has archive pages that
have the same look as the front page and
they can load the same CSS file and then
the multiple pages are even sharing
information so let's say your user
browses to the front page of the blog
then the CSS is going to get parsed and
loaded for the for the front page and
anything is was going to start browsing
into your archives and that same CSS is
already ready to go so by using CSS to
share this presentation with formation
even across pages you're not only going
to improve the performance of individual
pages but you're going to end of it and
prove the performance of your entire
website and this is going to result in
significant bandwidth savings for you
because you're going to load the
presentational information frequently
one for a website and then share it
across pages and in addition you're
going to eliminate all this
presentational markup that would
otherwise blow your HTML files and of
course it's going to result in better
performance in any modern browser
because there's going to be a lot less
work being done by the browser to render
your page so what I'm going to show you
now is a demo that's perhaps the
ultimate example on the web today of the
separation of structure and presentation
so we can switch to the demo now
hmm it's blacker I see it here love you
okay so what what a web designer named
Dave Shay did is he made a very simple
basic piece of unstyled markup which you
can see behind me it's just got some
headers you know some some list items
down towards the bottom and basically
this started off unstyled it almost
looks like we're you know we've traveled
back in time to the years in 1993 but
not quite there we go that's better much
more like mosaic with Winona all right
so what they shade did was he made this
markup and he said he challenged web
designers to produce innovative and
creative designs by styling this markup
and the restriction that was placed on
all of the web designers was you can't
change this markup you have to take this
existing markup that I made and come up
with a great design for it all without
being able to change the HTML and the
range and variety of designs that people
have been able to produce using only CSS
is just a pretty incredible and we can
show you some of the better ones right
now so we start with newer design that
was posted relatively recently that's
sort of a more basic one but you can see
nifty examples like the fixed bar on the
left much narrower column a lot of
interesting use of background images and
different fonts but you can actually
give a lot more radical effects with the
layout than this in this next example
the the designer actually took the
headings in the subsections and laid
them out horizontally in columns so
remember this is all the same markup
these web designers are all operating on
the exact same HTML page and what this
desire did was actually laid things out
horizontally but you can get even
wackier than that in this next design
the the page is laid out like panels in
a comic book and so this is the Wiggles
the wonder worm design and that's
actually real text you know that you can
select the text has been positioned
within the panels so what you're seeing
is a really clever uses of positioning
and background images to achieve a
layout that's just dude was just
completely different from
the previous ones that I showed so now
we can go to another design and this one
contains an interesting techniques that
I'm going to talk about next notice how
the B headers of the sections the text
has gone away and what's there instead
our images so somehow the designer of
this page of the CSS actually managed to
get rid of the text but it was in the
markup and put an image there instead
this is kind of a really clever trick so
what I'm going to do now is actually
talk about how that was done so if we
can go back to the slide so this
technique is called image replacement
and what image replacement is is pretty
obvious at this point having seen the
demo you basically are taking text in a
web page getting rid of it and somehow
replacing it with an image that you
specified in the CSS file and there are
a lot of different ways to accomplish
this a lot of very sort of clever clever
hacks that people have come up with the
use CSS to accomplish this so I'm going
to cover some of them and just a
reminder here's what we're trying to do
the original unstyled markup had just an
actual header an h3 element and what
we're wanting to do is actually take
that h3 element and treat it like an
image so what's the point well Oh an
obvious point of course is multiple
themes if you have the restriction that
you can't change the mark-up but the
semantic meaning of the mark-up is
header what you need to do is somehow
get an image in one design and text in
another so in order to support multiple
themes with different looks this
technique is the requirement and you
also don't have to change the mark-up if
the structural meaning of the mark-up
for example in this file those headers
are headers they're not images if you
think of the webpage being displayed
unstyled those are headers of
subsections so you don't actually want
to turn the markup into image tags
because that's not actually what the
structure of the website really
represent now in addition image
replacement can actually save bandwidth
because if you actually have say you're
using a blog article example again and
you have comments and trackbacks links
and
to represent those as images then you
might be reusing the same image a
hundred times on the page and with CSS
you'd only specify the width and height
and URL source URL one time whereas with
an image tag you'd at least have to
specify the source you are all over and
over again so there's actually a minor
bandwidth savings from using image
replacement as well in certain scenarios
so just a reminder it's the reason we
don't want to put an image tag in there
is this is a header semantically it's a
header it is not an image if we were to
throw an image tag in there then now the
onus would be on another designer to
hide the image and put the text back in
so this is not actually what we're
wanting to achieve so we can't change
the mark-up remember so an amusing trait
of these image replacement techniques is
web designers like to store their names
on them like their mathematical theorems
or something and with this one this one
wasn't even invented by the person who
it's named after in fact I'm not even
sure who invented it I think Todd
partner is notable for saying that CSS
should have a mechanism for doing this a
simpler one bin all of the mechanisms
that i'm going to show you actually so
this first technique what the earliest
one is called foreigner image
replacement or f ir for short and what
it does is it adds an extra span to the
markup in order to hide the text so you
can see that the h3 header has had a
span placed inside it and then what
we've done is using CSS we've set the
display to none which effectively hides
the text that makes it not be rendered
at all and then what we've done is taken
me a header itself and changed its width
and height to match the wits in height
of the image and then we just have put
the image in as a background image on
the header so basically we ditch the
text resize to the header and put a
background image on it to just make it
look like just the image so that's the
trick now there's of course an obvious
very obvious problem with this technique
we just I just preached that we didn't
want to pollute the mark up with
unneeded tags whose sole purpose was for
presentation and that's what we just did
so a problem with this technique is it
pollutes the mark up with that span that
you really shouldn't need it's also not
accessible to screen readers because the
display non is used to actually just get
rid of the text complete
the accessibility devices like screen
readers won't be able to find the text
and they won't be able to speak it aloud
and then in addition this technique
doesn't work if in browsers that support
the ability to turn images off because
if the image turns off all you've done
is made the background image of this
header go away and the text is still
gone you still in the text so if you
turn images off you just won't see
anything so ideally what you'd like is a
technique that that actually shows you
the text again when you turn the images
off so here's another second amusingly
named image replacement technique fork
image replacement and the swim Lane what
was it is that it's real name that is
his real name okay and what's Park image
replacement does is actually managed to
get rid of the span with another clever
hack and and like the other replacement
technique it sizes the header to the
width and height of the image and puts
it down as a background image but what
it does with the text is instead of
hiding it it uses a CSS property called
text indent and you would think that
you'd be shoving the text to the right
but for some reason what the heck does
it shows the text to the left very very
very far to the left a negative five
thousand pixels in fact and what that
does is basically makes the text render
you know way way way off to the left off
screen but then furthermore you can add
this overflow hidden property which
tells browsers to clip anything that's
outside your box so what happens is the
text it shove way out to the left and
then clip so the nice thing about this
technique is it avoids having an extra
span in the mark-up and this one works
with screen readers because the text is
still there just shoved way off into a
wacky position the screen you can still
find it and therefore it can still speak
it but a problem with this technique
still is that it doesn't work with
images off because again if you turn off
the background image all you're left
with is texted shoved way out to the
left and clip so you're not going to see
it so that leads me to introduce a and
appropriately named third image
replacement technique you know if I ask
rule and that is his real name lookit so
this one is similar to the farc one but
we'll work with images off and the way
it does this is instead of shoving the
text for out to the left and
of using a background image what it does
instead is creates a piece of generated
content this is a feature of CSS 2.1 and
so this generated content is done using
the second rule on the slide and so by
making an actual image as a piece of
content that actually gets put inside
the header when you turn images off that
content will go away and the text will
get pulled back up so the idea was to
make the image sort of participate in
layout and actually you know go away
when it goes away actually have it
affect the layout of the text so this
example will work in Safari Mozilla and
opera I believe in the latest versions
and it avoids having an extra span in
the mark-up works with images off and
works with screen readers so another
neat technique that is used on the same
garden site then I'm going to cover is
the the sliding doors technique now this
is a neat CSS trick for making tabbed
user interfaces you can also use it to
make rounded you know for example aqua
style buttons and the idea is to make
make these elements such that they still
have foreground text that you could
select conceivably or that's actual text
that's accessible to screen readers as
well so these tabs can also participate
in text zoom as well and this technique
was invented by a web designer Doug
Bowman and you can read much more about
this technique on a list of part com and
so I've got an image up here that is the
layout that we're going to try to
achieve just using CSS so we're going to
start with some markup we're just going
to start with a unordered list of links
and we're going to take that that simple
unordered list and we're going to turn
it into a set of tabs so this is just
like the links that you might have in a
typical nav bar going to various
subsections of your website so the
concept is that each tab is going to use
two background images one on the list
item and one on the anchor that was
inside the list item markup and the idea
is like sliding doors the images are
going to go over one another and the
narrower the space the more the two
images are going to actually overlap and
then the wider the text on the tab the
the images of the overlap so you can see
this this idea with some images here now
on the images on the left you can sort
of see the concept of overlapping you
know the small the narrower the text
smaller the text the more they'll
overlap and then the wider the text to
less and in the images on the right what
we're doing is using background images
and background images are always only
drawn within your elements bounds so the
idea is that you make these really large
background images that and you'll just
expose more and more of them in sort of
the visible doorway as you do techsou
more as you have you know wider or
taller text so the idea the easy way to
do this is to make the left image narrow
and then have the right image be the
rest of the background so you sort of
view the left edge that you want to
achieve and then all of the rest the
right edge plus your background pattern
goes into the second image so you can
see how you could use this technique to
do aqua style buttons or sort of rounded
buttons as well and the idea is that the
right image is going to be the one that
slides behind the left image and that'll
just happen naturally by virtue of the
fact that the anchor is a child of the
list item or sorry that's a yes exactly
and then the wider the tab the less the
two mental images will overlap and you
want your images to be tall enough to
accommodate the maximal texts oom and
browsers which is typically about three
hundred percent and then you want the
right image to be wide enough to
accommodate the degree you always want
the two images to at least overlap so
your background image should be a wide
enough to accommodate the maximal width
of text you're going to put on the tab
so here's a lot of CSS that sort of just
is housekeeping to set up the lists as
objects that fit horizontally and don't
have bullets anymore and the relevant
piece for the sliding door technique is
the background URL so you can see what
the background URL what we've done is
specified the image when we've also said
the image should not be tiled because we
don't want it to repeat itself and for
the list item the image should be
anchored at the right and the top so you
can think of it as being anchored on the
right and then spilling out to the left
and those of you with high-powered
binoculars in the audience can take a
look at what we have so far on the slide
so now we got the second image to the
anchors and this is like the other one
only we're going to anchor it to the
left into the top and also set it to not
repeat because remember this image is
narrow so we don't want it tiling on top
of the the right image and so the anchor
has this left image and it's going to
slide over the background image of the
list item and once we add the this rule
what we have now looks very much like
tab and so now what we're going to do is
switch to a demo and show you these tabs
in action so you can see what they look
like so what you can do is zoom the tabs
we can see that they work with text noon
and one thing that we're missing is we
don't really have a notion of a current
tab all the tabs look the same when in
reality you know you're always on some
particular subsection of the site so we
can show you how you can use the sliding
doors trick to actually add the notion
of the current tab and what you get what
you can see is you can basically add
rules that again just use the sliding
doors technique to add a different set
of background images for the current tab
and when we do that the end result will
be a set of tabs where we actually can
show the current one and so there you
can see that now so that's sliding doors
very very very very simple technique so
in addition what we can do is a I'm
going to put in a shameless plug for
HTML editing here so what we're going to
do is actually demonstrate content
editable and show you show how we can
actually edit the current tab and again
it's sort of just demonstrating that
it's all a dynamic layout and that
everything will flow you know as you're
editing
alright so now we can go back to the
slide so the CSS in garden is a great
site I encourage you to check it out
here is the the URL that you can go to
and there there are hundreds of designs
there at this point and it's basically
if you're wanting to design a dashboard
widgets look at the study this stuff
because all of these creative techniques
all of these things that these designers
do you can do in your dashboard widgets
so so check it out in addition there's a
great website called a list of part com
it's an essentially an online magazine
that regularly publishes articles on CSS
and that's where the content of this
sliding doors section came from and
since since the flat first sliding doors
article Doug Bowman's actually even
published a follow-up so I highly
encourage you to check out a list report
calm and and and learn more about this
technique so now that we've talked about
more basic styling techniques that work
in all browsers let's start getting
towards the edge of standards and talk
about some cool css3 stuff that you can
really use in WebKit to spice up your
web pages now one that's become quite
popular on the web since we introduced
it in Safari 1.2 is the text shadow
property and the type property was
actually originally in CSS to know one
implemented it except Safari got it in
right before CSS 2.1 became a standard
but unfortunately it was not in time for
them to actually put it back in so it'll
be returning in css3 so I'm effectively
going to consider it as css3 property
despite it having been around for a
while but what it does is lets you add
really neat shadow effects to text and a
shadow consists of three components the
color of the of the shadow text that's
going to be behind the regular text and
offset which represents the distance the
x and y distance from the shadow from
the original text and then a blur radius
which is sort of a thuds or distortion
that you can apply to the shadow and the
higher the blur radius the more diffuse
the shadow will be so here's a nifty
text shadow example that's showing 1
you can do with shadows this is an
eclipse effect and what I've done is
made a red text shadow on the body
offset by four pixels and then with a
small blur radius and the foreground
text is black and the background text is
black but because there's a shadow you
get this sort of Eclipse effect where
the text is readable because the shadow
is what's drawing so this is just one of
the nifty creative uses of text shadow
you can also use it more traditionally
you know a in text where the foreground
color does not match the background so
this is a really great simple
declarative way to make text look look
better in your web pages and if a
browser doesn't support it note no harms
done it will degrade gracefully another
great css3 feature that Safari has rich
support for its transparency in
transparency effect no it's this is
basically the ability to make elements
in your page partially transparent so
that you can see what's behind them now
there is currently a cross-browser way
of achieving this and by cross-browser I
mean in every modern browser except for
when I II and this is a you can do this
with transparent things which are images
that can incorporate alpha channels and
so that's a way of that's a safe way I
just should just say that up front
that's the way of at least achieving
transparency that will work in more
browsers now there's some more
lightweight mechanisms though that can
prevent you from having to make images
just to achieve transparent effect I'm
going to talk about two of those one is
RGB a colors and the second is opacity
so our TV a colors are basically just a
color specified it's four components a
red green and blue components and then
additionally an alpha value and the
syntax looks kind of like a function in
CSS you basically say our TV a
parenthesis and then in a comma
separated list you enter the red green
and blue values and the Alpha and the
RGB values range from 0 to 255 but the
Alpha value goes from 0 to 1 point 0
with one point 0 being fully opaque and
0 being fully transparent so if you make
the object fully transparent you won't
see it at all
so here are some examples of our GBA
colors and I basically put this up here
to demonstrate that everywhere you can
use a color in CSS in WebKit you can use
these transparent colors so this is a
great way to apply transparency only the
particular portions of your content in
particular you can make the foreground
text you know red and fifty percent
opaque or maybe you want to make only
your borders transparent while the rest
of your element remains non-transparent
maybe you have a border and you want the
background to show up behind the border
so that's a nifty visual effect you can
achieve by a by using transparent
borders in addition you can make a
background transparent just just use a
transparent background color to get the
content behind to show up and then
finally you can even use a opacity with
text shadow so you can actually make the
shadow itself even be transparent but
the really cool css3 feature is opacity
and opacity is a way to basically make
your element all its descendants all be
transparent as a unit so background
borders and your children all can become
partially transparent with one simple
declaration so for example if you wanted
to make all of your articles thirty
percent opaque that this is all you
would have to do it's just a single
property with a value that ranges
between zero and one just like the Alpha
value in the RGBA colors so now what I'm
going to show you what we spend a lot of
time talking about CSS so now let's
combine this with the Dom I talked
earlier about how the Dom was a great
mechanism for achieving dynamic effects
so what we can actually do is take the
support for opacity in modern browsers
and use DOM and JavaScript to create
fate effects when switching between our
sliding doors tabs in the previous
example and what's even better is we can
write this to degrade gracefully in
those browsers that are unfortunate
enough not to support opacity and this
example I'm about to show you works in
both Safari and in the latest mozilla
1.7 so let's walk through how we add
these fade effects well the first thing
we want to do is add a handler to the
links such that when you click the link
we're going to call a function to begin
our fade
to begin our fade-out so that's just
done with a simple onclick handler
attached to the link and what we're
going to do is assume that the content
of the web page underneath the tabs is
Anna div whose ID is content and that's
what we're going to operate on as we as
we do the fade out effect so what we
have here is first we decide the fate is
not going to be interrupted will so
we're going to track that with a fade in
progress boolean and if that's already
true when the user clicks on a link for
say a second time we'll just return
false which indicates to browsers that
you shouldn't follow the link so that'll
basically ensure that you know it's a
fade out is in progress we don't stop it
and start it again and you know visually
stutter and then what we're going to do
is actually a check basically a check to
see if the browser supports opacity so
what we do is we get our content element
and we just try to set its opacity to be
fully opaque and if that fails
essentially if we then query for the
style that we set and we get the empty
string back we can return true follow
the link and assume that opacities not
supported but if you're using safari in
missoula we can keep going so what we
then do is set the the fade in progress
to true and we set a time out to
continue to fade with a 25 milliseconds
value so what this means is it will get
a callback very very shortly that will
allow us to start doing the dynamic
effects and another minor note here is
we've also made this slick enough that
if the user changes his or her mind
about what anchor they wanted to click
on if the fades in progress note that we
update the current anchor always so that
always ensures that the fade effect will
just continue and then you'll always go
to the last anchor that that the user
click and now finally we return false to
indicate that we can't follow the link
yet because we're going to be doing the
fade out effect so now let's look at the
continued fade function so it's very
simple we start off with our current
opacity at one we we're going to decide
that we're going to fade out in two
basically two percent increments so we
subtract two percent from the opacity
effectively and if this puts us below
zero at or below zero we're done so we
we set our windows current location to
be the
A Href of the anchor the last anchor
that the user clicked otherwise we're
still doing the fade-out and what all we
have to do it's very simple we just take
the opacity property and we set it to
this current opacity so we just start
lowering it and then we set a time out
to keep continuing the fade so we'll
just keep getting called back and fading
out further and further until we're
finished now let's see a demo of the
state effect in action so what you can
see here is we've got the same sliding
door tab but now when you click on the
home link you'll see this really neat
fade out effect and then if you click
back on the news link again you see so
very very quick very very simple and it
just adds some some visual spice to the
web page and a user that did in a
browser that doesn't support opacity
you'll never know that it wasn't there
all right so we can go back to the edge
of the slide so here's another new CSS
free property that we now support as of
the latest WebKit beta and that's
support for text truncation so instead
of clipping text when it spills outside
of a box we can actually now render an
ellipsis instead and this is done with a
new css3 property called text overflow
and text overflow takes two values clip
and ellipses so clip is essentially the
default behavior but you can actually
change this to ellipses to achieve the
truncation effect and the basic idea the
common way that you'll use this sort of
thing is when you have single line
headers or maybe even URLs URLs or
another good example where you would
like them to stay on one line and not
you don't to have some ugly visual
rendering where they spill over the rest
of your content so what you do there's
basically three three very relevant
properties here not just text overflow
for one thing you could already have
done overflow hidden to make sure that
say a long URL was clipped so that it
didn't paint on top of other content
that you didn't want it to so that's
that's a good thing to just do in
general like say with the content
section of a website to keep the things
in the content from spilling out on
delight say your blog roll or your
bars so what you put overflow hidden in
the text is going to be clipped in
addition with single line headers you
might want to say whitespace no rap this
is basically a way of saying don't wrap
the text to multiple lines Safari has
heuristics where it does try to break up
long URLs and it might be that you
actually don't want the URL to render
that way you may want to keep it on a
single line so whitespace no rap that's
how you do that and then finally
highlighting in orange you can see the
text overflow property set two ellipses
and it's very simple you can see that
here's a simple header with very long
text and I've put a border on it so that
you can really really see it clearly and
this text is just truncated naturally
with ellipses as it runs up against the
border box of the of the header so
that's a really cool feature this
particular feature is actually supported
in internet explorer for windows as well
as safari so I've covered basic styling
techniques and then even gotten into
cutting edge techniques and css3 now
let's sort of leap into the realm of
dashboard and WebKit and see what we've
done that's gone beyond the standards so
one thing that we've done is we've added
two new form controls that you can use
and those are sliders and search fields
and we've exposed those as form controls
in a web page just like all the other
form controls they can be submitted
their values can be queried inset and
this gives you richer widget
capabilities in addition I encourage you
to attend the WebKit session tomorrow
where Richard Williamson will be
covering the advanced graphics effects
that we've added for dashboard and those
include image compositing where we've
added a new composite attribute to the
image element to allow you to achieve
more advanced compositing effects with
images and in addition we've added a new
canvas element to HTML that lets you do
programmatic two-dimensional drawing
like lines and fills in addition there's
a lot of new advanced layout
capabilities in Safari it has a complete
spring and strut implementation that's
also implemented by Mozilla that allows
you to achieve a lot of layouts that
work are currently not achievable in CSS
and that are considered quite difficult
by web designers like the ability to
easily Center
elements in the center of a viewport
we've also added very rich and
compatible support for drag and drop
there's a now a drag and drop API that's
compatible with Internet Explorer for
Windows but in which we've also added a
lot of extra features like the ability
to control the drag image dynamically
and they also have involved CSS and this
dragon drops that you can dynamically
style the dragged image with a pseudo
class and finally the big features a big
feature of WebKit is HTML editing and
that includes both editing of entire web
views from web kitap locations and the
ability to do in page web editing using
continent able so to find out all about
HTML editing I highly encourage you
attend zee the talk that's vaguely named
advanced web kit features on Friday that
talks actually going to be all about
HTML editing as well as showing you how
to use some the Dom API from objective-c
so let's cover some of these new form
controls so the way you do a slider is
with input type equals range so so
that's all you have to do to introduce a
slider whether or not it would be
horizontal or vertical will depend on
whether you make the width or height
larger which dimension is larger will
control the orientation of the slider
there are attributes called min and Max
that set the range of the slider there's
a precision attribute that allows you to
specify whether you want the slider to
report float values by default or
integer if you if you may basically make
it report integer values it'll always
lock to an integer value even though
you're doing continuous slider dragon
and then of course the value attribute
that nearly all of the form controls
support can be used to query for the
value and set it and this slider can
participate in form submission by
submitting its value in addition we've
added support for the input events this
is an event also supported by Mozilla
and we've added it not only two sliders
with the text field and this event fires
immediately when you're typing and for
sliders it fires immediately when you're
dragging so the basic idea behind this
new input event is you know if you want
to have things happen live or in real
time immediately this
the event you want to use and so for
sliders it'll fire whenever the value
changes for any reason so here's a great
really tiny slider example that sets the
opacity so here we have a slider a
floating slider that goes between 0 and
1 point 0 remember one point I was fully
opaque zeros fully transparent it will
say it starts off at 0.5 right in the
middle and we have a non input handler
that grabs the the content div from the
previous example and just such the
opacity of the current value so it's
that simple and if you were to put this
in your web page and the user were to
drag it you'd have a meet dynamic
transparency effect so another cool
widget we introduced is the search field
and this is basically just a HTML way of
getting to the functionality of a cocoa
in a search field this is done with
input type equals search the incremental
attribute controls live searching you
just have to put that attribute with no
value in your HTML and and the control
will be live there's a results attribute
that you set to the number of results
you want to remember and that will
remember previous searches in addition
you can give an autosave name with an
autosave attribute that tells basically
as an identifier that's used to store
the results of the search and what's
neat about this is you can even say
something like autosave equals Google
throw this thing on your website and
everybody who wants to implement a
google search field can use a common
autosave name and all of those results
will actually be shared among those
search fields the placeholder attribute
is used to control the great out text
that you see in the search field before
you begin a search and then finally
there's a new event because the inner
circle has a rather complicated
heuristic that it uses for determining
at what time you should begin the search
rather than force you to put in key
handlers and click handlers and all of
that garbage you can just listen for a
search event and it will fire exactly
when it's supposed to making it easier
for you to implement and it just fires
exactly when you're supposed to perform
a search and you can do whatever if
you'd like to do what's really kind of
nifty about this that may make it
interesting use on websites is that an
unrecognized input type actually results
in a text field in other browsers so
that means that you can
actually use a search field if you just
want to get the different look with say
storing results using a magnifying glass
icon if you may you just want to achieve
that different look you can safely use
this in a web page because other
browsers will still show a text field so
this degrades gracefully in other
browsers that don't support it and
here's a just a very simple example of a
search field that's incremental so it's
lie with a little placeholder string
that says click your search and then
some action that you would perform an
example is of course that will shown a
min it is the dashboard widget for
searching a dress book so let's put it
all together with these enhancements and
sort of start looking at the Safari RSS
feature as well as a dashboard from the
perspective of this is just an HTML page
with some slick new features in it so
what we can do is start by going to an
RSS feed and what you can see here is
there's there's some truncation in
action if you resize the window to be
really really small or just zoom the
text you can see that the headers in the
Safari RSS actually are truncating and
they're just doing that with the text
overflow property this is just a web
page that's been generated by the RSS
engine and in addition there's some very
complex layout at work here there's a
spring and strut layout on the on the
header and date as well as to do the
vertical stacking of the articles and
and to participate in the slider so you
can see there's a slider widget up there
if you drag it there's a really neat
dynamic effect that can be achieved and
note note that it's actually a fairly
speedy effect and you can do everything
that this page is doing you can do this
is all open this is all there and WebKit
for you to use and so now what we can do
is actually look at dashboard so we can
bring up dashboard and we can show let's
demo drag and drop so if you drag the
address book out slowly note how the
drag image started off as the address
book and then we dynamically updated it
and we even did a fade as we dynamically
updated it so the drag image for the
widget actually slowly faded in and then
when you drop it of course you get the
wizzy ripple effect
and you can see the this is just an HTML
page and you can see the search field
input type equals search in the bottom
right and you can type things like the
last name and you can even click on the
the magnifying glass and you'll see hit
enter so bugs like there you go and
you'll see that it'll start storing
results for you sinker but all of its
all of this is very very straightforward
very simple very very easy to use and so
back to slides and so the best news all
of the CSS features all the CSS
properties including the new ones like
text truncation all of these widgets
sliders and search fields basically all
of these these capabilities will be
available with WebKit not only on tiger
but on Panther
[Applause]