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]