Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to Core CSS3
Similar to Core CSS3 (20)
More from Rachel Andrew
More from Rachel Andrew (20)
Recently uploaded
Recently uploaded (20)
Core CSS3
- 1. hello.
- 2. Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com
- 3. CSS 3
- 4. CSS3 is the next version of CSS
- 6. Some CSS3 modules are more complete than others
- 7. W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
- 8. CSS3 is supported by browsers Some browsers and some (parts of) modules.
- 9. Vendor-speci c extensions Implementing early stage CSS3
- 10. border-radius
- 11. border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
- 12. In defence of vendor- speci c extensions
- 13. Using CSS3
- 14. Selectors module W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/
- 15. The problem with CSS2 selectors Not precise Led to “classitis” If we can’t access mark-up it is hard to target things
- 16. CSS3 Selectors “Common sense” new selectors target elements more precisely without adding classes
- 17. rst-child target an element when it is the first child of a parent element
- 18. rst-child
- 19. rst-child div#wrapper p:first-child { font-size: 1.5em; }
- 20. rst-child
- 21. last-child target an element when it is the last child of a parent element
- 22. last-child
- 23. last-child ul#navigation li:last-child { border-bottom: none; }
- 24. last-child
- 25. nth-child select multiple elements according to their position in the document tree
- 26. nth-child
- 27. nth-child tr:nth-child(odd) td { background-color: #f0e9c5; }
- 28. nth-child
- 29. nth-child tr:nth-child(2n+1) td { background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressions
- 30. Adjacent Sibling div#wrapper h1 + p { font-size: 1.5em; }
- 31. Adjacent Sibling
- 32. Attribute Selectors form input[type="text"] { } form input[type="submit"] { }
- 34. Attribute Selectors label[for="fContact"] { float: none; width: auto; } a[href ^="mailto:"] { padding-right: 20px; background-image:url(email.png); background-repeat: no-repeat; background-position: right center; }
- 35. Browser Support
- 36. Browser Support
- 37. Does it matter?
- 38. Yes, it matters.
- 39. JavaScript Plug the holes in browser support using JavaScript.
- 40. jQuery: rst-child div#wrapper p:first-child, div#wrapper p.first { font-size: 1.5em; } <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ $("div#wrapper p:first-child").addClass("first"); }); </script>
- 41. jQuery: last-child ul#navigation li:last-child, ul#navigation li.last { border-bottom: none; } <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ $("ul#navigation li:last-child").addClass("last"); }); </script>
- 42. jQuery: nth-child tr:nth-child(odd) td, td.odd { background-color: #f0e9c5; } <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ $("tr:nth-child(odd) td").addClass("odd"); }); </script>
- 43. Scripts that “ x IE” http://www.keithclark.co.uk/labs/ie-css3/ http://ecsstender.org
- 44. Color module Working Draft http://www.w3.org/TR/css3-color/
- 45. opacity specify the opacity of an element
- 46. opacity
- 47. opacity ul#gallery li { opacity: 0.4; } ul#gallery li:hover { opacity: 1; }
- 48. RGBA specify the opacity of a colour with ‘alpha’
- 49. RGBA
- 50. RGBA div#feature .caption { background-color: rgba(255,255,255,0.5); }
- 51. 24ways.org
- 52. Browser Support?
- 53. Fonts module Working Draft http://www.w3.org/TR/css3-fonts/
- 54. @font-face using a font other than one installed on your user’s computer
- 55. @font-face @font-face { ont-family: KaffeesatzBold; f rc: url(YanoneKaffeesatz- s Bold.ttf); } h1 { font-family: KaffeesatzBold, sans- serif; font-weight: normal; }
- 56. Fonts with Font Squirrel http://www.fontsquirrel.com
- 57. Font Squirrel
- 58. Font Squirrel @font-face { font-family: 'YanoneKaffeesatzBold'; src: url('yanonekaffeesatz-bold-webfont.eot'); src: local('☺'), url('yanonekaffeesatz-bold- webfont.woff') format('woff'), url('yanonekaffeesatz- bold-webfont.ttf') format('truetype'), url('yanonekaffeesatz-bold-webfont.svg#webfontUcEp3Pt5') format('svg'); font-weight: normal; font-style: normal; }
- 59. Hosted font services http://www.typekit.com http://fontdeck.com/
- 61. Backgrounds & Borders module W3C Candidate Recommendation http://www.w3.org/TR/css3-background/
- 62. multiple backgrounds Apply more than one background image to an element
- 63. backgrounds blockquote { background: url(quote- left.gif) top left no-repeat, url(quote-right.gif) bottom right no-repeat; }
- 64. backgrounds
- 65. border-radius Yes! CSS rounded corners
- 66. border-radius .box1 { background-color: #a18c83; border: 3px solid #6d4d6b; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; color: #fff; padding: 10px; margin: 0 0 20px 0; } .box2 { border: 5px solid #6d4d6b; -moz-border-radius-topleft: 50px; -webkit-border-top-left-radius: 50px; border-top-left-radius: 50px; padding: 10px 5px 5px 20px; }
- 67. border-radius
- 68. Browser Support
- 69. Media Queries W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/
- 70. Media Queries target browser characteristics, for example screen resolution, width and height
- 71. Media Queries div#wrapper { width: 780px; margin-left: auto; margin-right: auto; } div#header { background-image: url(media-queries-browser.jpg); height: 349px; position: relative; } #content { float: left; width: 540px; } #navigation { float:right; width: 200px; }
- 72. Media Queries
- 73. Media Queries @media screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } }
- 74. Media Queries
- 75. Media Queries <link media="screen and (max- device-width: 480px)" href="small.css" type= "text/ css" rel="stylesheet" />
- 78. Thank you. Slides and resources: http://wp.me/PorPc-9d Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/
Editor's Notes
- I&#x2019;m Rachel Andrew. You can find me on Twitter @rachelandrew and the links here are to my personal and business sites if you want to know who I am. The important thing is that I&#x2019;m a front and back-end web developer and spend my days actually using the stuff I&#x2019;m going to be talking about today on commercial projects for real clients. So I tend to take a pretty practical approach to it and feature the things I feel are useful right now.
- This session is Core CSS3 - so in the next 40 minutes or so we&#x2019;ll have a look at CSS3 with an emphasis on things we can use right now. Don&#x2019;t worry about taking notes or copying down code - I&#x2019;ll give you a link at the end of the presentation where you can download slides, example code, and any links for examples. So what is CSS3?
- Fairly obvious - CSS3 is the next version of CSS.
- Earlier versions of CSS were a single monolithic spec. CSS3 is different - it is broken down into modules.
- Modules are at different levels of completeness and slower, more involved modules then don&#x2019;t hold up other parts of the spec.
- Working Draft (WD) A Working Draft is a document that W3C has published for review by the community, including W3C Members, the public, and other technical organizations. Candidate Recommendation (CR) - gather implementation experience Proposed Recommendation (PR) - sent to the W3C Advisory Committee for final endorsement. W3C Recommendation (REC) -specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations.
- Browsers have been implementing parts of the CSS3 spec for a long time. Firefox, Opera, Safari, Chrome etc. all offer support for many different parts of the spec.
- Vendor specific extensions are one way that browser manufacturers started to implement CSS3 at a very early stage of some modules.
- We&#x2019;ll be looking at this in detail later but border-radius (which gives us rounded corners in pure CSS) is one place where browsers implemented support with their own extensions.
- The 1st line is how Mozilla implemented this in Firefox when the module was at a very early stage, the 2nd is the webkit extension for Safari and other webkit browsers (including Chrome). Safari 5 - just out - has added support for the standard border-radius. The last line here is the actual CSS3 border radius property. If using a Vendor specific extension always add the actual CSS3 declaration as well. For example when IE9 comes out it will support border-radius, if you omit it now from your CSS then IE9 won&#x2019;t show the rounded corners even though it would be able to.
- a W3C approved way to add extensions Usually added at an early stage of module development If the module changes the browser doesn&#x2019;t need to change their implementation thus breaking older code. Use carefully and keep an eye on the actual spec and correct way to do things.
- I&#x2019;m now going to take a look at some practical examples of CSS3 - things that I&#x2019;m currently using in real sites.
- Selectors module
- In CSS 1 and 2 we had selectors that let us target things such as html elements - h1, h2, paragraphs, divs and also classes and ids. Often have to add classes just for the CSS - for example a class on the last item on a list Annoying when we can access the mark-up, doesn&#x2019;t help separate presentation from content & structure Sometimes we can&#x2019;t access the mark-up - generated by a CMS we can&#x2019;t change etc. and then we end up having to lose bits of a design because we can&#x2019;t do them without adding classes.
- CSS3 selectors will just make our lives so much easier - both for front and back-end developers.
- first-child actually appears in the 2.1 spec however lack of browser support in older versions of IE means it doesn&#x2019;t get a lot of use. It&#x2019;s a nice easy way to start looking at more advanced selectors however.
- We have a set of paragraphs -these are inside a div with an id of wrapper. With CSS2 we would need to put a class on the first para in order to style it differently.
- As this screenshot shows - the CSS we used means we can target that first paragraph and make the text larger without needing to add anything to the mark-up.
- Introduced in CSS3
- An example where last-child might be useful is when styling list navigation. The li elements have a bottom border but we don&#x2019;t want to put that on the last element.
- As you can see this removes the border just from the last li in that list - once again we don&#x2019;t need to add any additional elements to our mark-up.
- We have a table here and the designer has requested that we colour every other table row to aid readability. This is a common request and usually means the developer has to put a class on the odd rows.
- Here are our odd rows all coloured as requested, with no additional mark-up.
- nth-child can take arguments using a multiplier in addition to odd and even keywords. Using the multiplier 2n+1 would be the same as using the keyword odd. These multipliers get a bit complicated and I would suggest having a look at the listed Sitepoint resource to get your head around how they work as they can be a very powerful way to taregt elements in your mark-up.
- The selectors we have looked at are all &#x201C;structural pseudo-classes&#x201D; they look a bit like the other pseudo-class selectors you may be familiar with - the ones we use for the different states of a link - link, visited, hover and active. Time limits me from looking at too many selectors today but another group of selectors that are very useful are known as combinators. We have things like an adjacent sibling combinator&#x2019; selecting an element that is next to another element that shares the same parent. So the p that comes straight after an h1 for example.
- This rule would make the first paragraph directly after an h1 larger in this example.
- Attribute selectors were also part of CSS2.1 however lack of browser support has meant they are not much used. However as they are also part of CSS3 and very useful in our aim of not cluttering mark-up with classes we&#x2019;ll have a quick look at them. Attribute selectors let you get at an element based on it&#x2019;s attribute. An obvious use for these is in forms. If you just target input you get text fields, submit buttons and checkboxes etc. This usually means we stick classes on all the input elements to distinguish them. Attribute selectors let you look at the type attribute of the input element and style appropriately.
- There are two other things I have used attribute selectors for in this example. The labels have been styled floated left and given a width - which I don&#x2019;t want to do with the checkbox label. I also wanted to display and email icon next to the email us text.
- So I&#x2019;m using the for attribute on the label to check for the label of that field and setting it to float none and width auto. To get the email link we use the second declaration - ^= shows we want to match things in the href that begin with mailto
- So before we get too excited about this - what about the thorny issue of browser support? If you know a bit about CSS3 and aren&#x2019;t using it right now it is probably because of the requirement to support more browsers than just those that have support for these selectors already.
- as you can see things look great if we look at Firefox, Safari, Chrome and Opera ... not so stunning when it comes to Internet Explorer. Even the most recent release of IE8. A couple of selectors we looked at that we part of CSS2.1 (attribute and first-child are supported by IE7 and 8) Things look up when it comes to IE9 which promises to support a lot of CSS3 however what can we do now?
- The first thing to check is &#x201C;does it matter&#x201D; that Internet Explorer sees something a bit different. In a very few cases you might feel happy to just fall back to allowing IE to not have striped tables, larger initial paragraphs etc.
- For most of us though, our clients would expect the site to look pretty much the same in IE8 as in Firefox so what can we do?
- Particularly where selectors are concerned, you can very easily add support using JavaScript.
- This is an example of how you can use jQuery to add support for first-child. Add a class to your rule for p.first then select the first-child using jQuery (which supports the CSS3 selectors) and add the class. You could just add the CSS directly using jQuery but then you have to remember to update the rules in the JavaScript as well as in the CSS so I feel this is a bit neater.
- Here is the same technique as used for last-child
- and nth-child. JQuery makes this very easy but you could do the same using any library you are already using on your site.
- IE-CSS3.js - selectors only, needs a library included as well ecsstender - several extensions for different modules if not already using javascript these can be really useful. If using js I&#x2019;d usually add a fixSelectors function into my UI js file and do them there. I&#x2019;d urge caution in putting these scripts in place at the beginning of a build - rmemeber some users may have an old browser and no javascript, make sure the experience is ok for them before adding js to the mix.
- Color module - properties that allow authors to specify the foreground color and opacity of an element
- Opacity effects the entire element and it&#x2019;s contents.
- The boxes have been given an opacity value, we are also using the hover pseudo-class on the list item to change the opacity on hover.
- Should be noted that opacity effects everything in the li including the text.
- The color module introduces RGBA
- I needed to get a photo of my cat in here somewhere... the caption on this photo has a semi-transparent background which is implemented using RGBA. I didn&#x2019;t want to use opacity as that would have made the text opaque as well.
- The 0.5 is an opacity value on the background colour. 0 would be transparent 1 would be fully opaque - a solid colour.
- See an example of RGBA being used extensively on the design for 24ways.
- Neither opacity or RGBa are supported by IE up to version 8. If using RGBA you should specify a color using rgb before the rgba line in your CSS in order to provide a fully opaque version - without this no colour will be used. You can fake some of this using JavaScript depending on the effect you are going for. The good news is that IE9 will have support.
- Fonts module
- One thing that web designers have longed for is the ability to be able to specify particular fonts and know that users will be able to view the site in them. @font-face enables the importing of a font that you have uploaded to your web server - then that font can be used in your font stacks just like any standard font.
- In theory this should work like this. The @font-face rule points to the font file with a familiar url construct. You can then use it. In the real world however things are not so simple... we have two problems, different browsers and operating systems and the licensing of fonts. Many fonts you will find are not licensed in such a way that you can upload them to your web server, presuming you have a font that is able to be licensed. You can do the following:
- Upload your fonts and Font Squirrel will create a package of fonts that will work across all major browsers.
- You will end up with a fairly terrifying looking @font-face declaration but it will contain font files that work well cross browser.
- Using a hosted font from typekit
- Background and borders module
- So here is something that should make a lot of people happy. The CSS3 backgrounds module allows for applying multiple backgrounds to a single element.
- so on this blockquote element I can add image quote marks as a background at the top left and bottom right of the element without needing to add an extra element.
- ...which gives us a result like this. I&#x2019;m sure you can think of lots of uses for multiple background images.
- So it is probably against the law to do a CSS3 presentation without mentioning rounded corners so here they are. The backgrounds and borders module includes the spec for adding rounded corners to an element.
- As of Firefox 3.6 FF supports multiple backgrounds as do recent versions of Safari, Opera and Chrome. Rounded corners are supported by all these browsers as well. IE9 will have support for these - until then you can effect support using JavaScript if required.
- I want to wrap up this introduction to the useful now bits of CSS3 with a quick look at media queries. The great thing about media queries is that the place where they are most useful - we already have good support.
- Media queries let you target browser characteristics such as screen resolution and provide alternate styles. If you have ever created a print stylesheet the concept of creating a whole new stylesheet or overwriting some existing styles should be familiar to you. Where this is very useful today is if you want to create a version of your site for the iPhone or other devices that support media queries. A device running an up to date Webkit, Opera or Mozilla based browser should have support.
- Here is the code that creates a two column layout.
- It looks something like this in Safari or other browsers. I have decided that for iPhone and other small device users I would like the big image at the top to be smaller to reduce scrolling and the layout to drop to one column with the main content at the top.
- so this is the code that detects the screen width of the device and resizes accordingly. The important bit is that which I have highlighted in yellow. So here we are in our main stylesheet or in style tags at the head of the document in my example just to keep it all in one place. This lot comes after the main screen CSS so overwrites them if the user has a device with a max-device-width of 480pixels.
- So we get something like this.
- I could also have 2 stylesheets and link the appropriate one using this link syntax. In practice I&#x2019;d probably go for this approach as it seems neater to me to have the different styles in a separate stylesheet and I like the maintainability of it. If you only have a few changes to make though you could do them inline as previously demonstrated.
- example site using media queries in browser
- example site on iPhone. Even if you feel that a lot of CSS3 isn&#x2019;t possible for you to use for your sites and clients right now, I&#x2019;d really encourage you to have a look at media queries. With just a little bit of CSS you can have customised views of your site for small screen devices - a special iPhone version just thrown in for free as far as your clients are concerned. Definitely worth trying out.
- So that about wraps it up. (Check time for questions). Later on today or this evening - wifi permitting - I should get my slides, some resources, and example files online at the above URL - I&#x2019;ll also post to my blog once they are up at rachelandrew.co.uk.