Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Nächste SlideShare
Hardcore HTML
Hardcore HTML
Wird geladen in …3
×
1 von 56

Hardcore CSS

2

Teilen

Herunterladen, um offline zu lesen

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Hardcore CSS

  1. 1. HARDCORE CSS Eric Redmond @coderoshi PDX Web & Design
  2. 2. A SHORT HISTORY OF Hardcore CSS CSS
  3. 3. CSS Cascading Style Sheets A SHORT Separates style from HISTORY OF CSS substance  (separate from HTML) Stylesheets non-standard In 1990 TBL separated docs from layout Each browser decided doc style
  4. 4. Cascading HTML style sheets – a proposal A SHORT Oct 10, 1994 HISTORY OF CSS Håkon W Lie (CERN) proposes
  5. 5. Cascading HTML style sheets – a proposal A SHORT Oct 10, 1994 HISTORY OF CSS Håkon W Lie (CERN) proposes
  6. 6. Cascading HTML style sheets – a proposal Oct 10, 1994 A SHORT Håkon Lie (CERN) HISTORY OF CSS Bert Bos was first adoptor Cascading? An ordered list of stylesheets, that start with the first, and values are added/overridden by later SS 1995-1996 Netscape, IE and others added support CSS Level I emerged from W3C draft in Dec 1996
  7. 7. CSS2 1998 Level 2 was proposed A SHORT Adoption was relatively fast HISTORY OF CSS CSS3 First draft published in 1999 Divided into 50 modules Still being fucking written Sllloooowwww adoption… CSS4 Started in 2009 Not support at all
  8. 8. Hardcore SELECTORS CSS
  9. 9. Universal Elements Classes SELECTORS IDs Attributes Pseudo classes Pseudo elements
  10. 10. <em>I’m Arial too!</em> *{ SELECTORS font-family: Arial; U n i v e r s al }
  11. 11. <strong> hulk smash </strong> SELECTORS Elements strong { color: green; text-transform:uppercase; }
  12. 12. <span class=superhero> Iron Man </span> SELECTORS Classes .superhero { font-family: 'International Super Hero' ; }
  13. 13. <div id=main> My main content. </div> SELECTORS IDs #main { border:1px solid green; padding:1em; }
  14. 14. <article role=main> My main content. </article> SELECTORS IDs [role=main] { border:1px solid green; padding:1em; }
  15. 15. <ul> <li>Item 1</li> <li>Item 2</li> SELECTORS </ul> Pseudo Classes li:first-child { color:red; }
  16. 16. <h1> Excelsior </h1> SELECTORS Pseudo Elements h1:after { content: '!'; }
  17. 17. <h1>Page Title<h1> <section> <h1>Section Title</h1> SELECTORS </section> Nesting section h1 { color:blue; }
  18. 18. <h1>Page Title<h1> <section> <h1>Section Title</h1> SELECTORS </section> Nesting section h1 { color:blue; }
  19. 19. Hardcore SPECIFICITY CSS
  20. 20. <section id=person> <div id=name>Joe</div> <div>A nice guy</div> SELECTOR SPECIFICIT Y </section> What wins? #person div { color:red; } #name { color:blue; }
  21. 21. SELECTOR SPECIFICIT Y
  22. 22. SELECTOR …What? SPECIFICIT Y
  23. 23. SELECTOR SPECIFICIT Y www.w3.org/TR/css3-selectors/#specificity Calculating a selector's specificity  count the number of ID selectors in the selector (= a)  count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)  count the number of type selectors and pseudo-elements in the selector (= c)  ignore the universal selector
  24. 24. CALCULATION Selector a b c Specificity * 0 0 0 0 li 0 0 1 1 ul li 0 0 2 2 ul li:after 0 0 3 3 h1 *[rel=up] 0 1 1 11 ul li span.red 0 1 3 13 li.red.level 0 2 1 21 #name 1 0 0 100 #person div 1 0 1 101
  25. 25. EASIER WAY I.C.A.T.  IDs > Classes/Attributes > Types  Pseudos are of their kind  Pseudo-classes are classes  Pseudo-elements are elements (types)
  26. 26. EASIER WAY 1. Compare the count of IDs  div#content *[role=main] section#person = 2  section#person div#name .superhero:last = 2 2. Compare the count of Classes+Attributes  div#content *[role=main] section#person = 1  section#person div#name .superhero:last = 1 3. Compare the count of Types  div#content *[role=main] section#person = 2  section#person div#name .superhero:last = 3
  27. 27. Hardcore ADVANCED(ISH) DETAILS CSS
  28. 28. The Box Model THE BOX MODEL
  29. 29. More Box Model THE BOX MODEL
  30. 30. [attr] – attr exists [attr=val] – value equals ATTRIBUTE [attr~=val] – exists in MATCHING whitespace set [attr|=val] – value followed by a dash [attr^=val] – value begins with [attr$=val] – value ends with [attr*=val] – value contains
  31. 31. :nth-child(N) :nth-last-child(N) PSEUDO :nth-of-type(N) CLASSES :first-child :last-child :empty :target :enabled :disabled :not(S)
  32. 32. Hardcore CSS3 FUN THINGS CSS
  33. 33. Fonts Typekit Google Fonts FontSquirrel Baby Typography Tracking (not Kerning) Leading Shadows
  34. 34. Boxes Border types Border Radius Outline Box Shadow box-shadow: 6px 6px 6px 6px #666; [right] [down] [blur] [width] #[color];
  35. 35. Backgrounds Gradients  lea.verou.me/demos/cssgradient splease Patterns  lea.verou.me/css3patterns background-image: -webkit-linear-gradient( bottom, rgb(4,4,133) 15%, rgb(40,66,171) 58% );
  36. 36. Transforms Most browsers require a prefix -o-transform: …; -ms-transform: …; -moz-transform: …; -webkit-transform: …;
  37. 37. Rotate transform: rotate(20deg); Scale transform: scale(2, 2);
  38. 38. Transitions Best in reaction to something! Timing Easing
  39. 39. Hardcore MEDIA CSS
  40. 40. MEDIA T YPES Media Type Description all All media type devices aural Speech and sound synthesizers braille Braille tactile feedback devices embosses Paged braille printers handheld Small or handheld devices print Printers projection Projected presentations, like slides screen Computer screens (and mobile screens) tty Media using a fixed-pitch character grid, like terminals tv Television-type devices
  41. 41. External Media Attribute <link rel="stylesheet” media="print" MEDIA href="printer.css" /> Inline Media Rule @media print { body { color:black; } }
  42. 42. Hardcore (BEST?) PRACTICES CSS
  43. 43. Problem: Browsers still have different default behaviors BEST PRACTICES Solution: Reset CSS
  44. 44. *{ vertical-align: baseline; font-weight: inherit; BEST PRACTICES font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; }
  45. 45. yui.yahooapis.com/3.5.1 /build/cssreset /cssreset.css
  46. 46. Problem: Some Browsers (*cough*IE*cough*) do not BEST recognize HTML5 elements PRACTICES (Best?) Solution: P r a c t i ce s Modernizr
  47. 47. Problem: Some browsers pre implemented CSS3 BEST PRACTICES Solution: (Best?) P r a c t i ce s Know the prefixes  -o- = Opera  -moz- = Mozilla (Firefox)  -webkit- = Webkit (Chrome, Safari, iOS)
  48. 48. Problem: EMs are inconsistent Solution: BEST PRACTICES Set font size to 10px (Best?) P r a c t i ce s html, body { font-size:10px; }
  49. 49. Hardcore LAYOUTS CSS
  50. 50. Classic floats One True Layout  positioniseverything.net/articles/ onetruelayout LAYOUTS Floats The Holy Grail  alistapart.com/articles/holygrail
  51. 51. Multicolumns LAYOUTS CSS3 M u l t ic o l umn s
  52. 52. Display Box LAYOUTS C S S 3 D i s p l ay B ox
  53. 53. Elastic LAYOUTS Elastic
  54. 54. Fluid LAYOUTS Fluid
  55. 55. Responsive Just change layout using media queries LAYOUTS Re s p o n s i ve @media only screen and (max-device-width: 480px) { body { font-size:10px; } }
  56. 56. Summer Social & Lightning Talks PDX W&D UPCOMING Thursday, Aug 9 Webtrends (that would be here) Rails Girls PDX September 7-8 Signup at RailsGirls.com (ladies only)

Notizen

  • Upload slides before talk, and post the link here
  • What is CSS? Basically, it’s a way of making your HTML styled how you want it to look.Stylesheets were even built into Tim Berner’s Lee (the creator of HTML and, basically, the web) – although it was up to browser makers to manage it.People wanted more control over this new medium. Existing publishing tools like LaTeX could trivially manage layout in ways that weren’t possible in the web. People wanted more.
  • Håkon Lie was a physicist atCERN who wanted more powerful presentation.
  • Is there a CSS4? Yep! But no one supports it, so who cares? Let’s go back to CSS3!
  • elements match all HTML element types. These are the easiest and weakest way to match.
  • Classes match any element that have the matching classes names, and are prefixed with a dot. They don’t have to be the same elements type and there can be as many copies of the same class name as you want. You can have a superhero for
  • IDs are the most restrictive, and there should only ever be one matching ID in a document. Don’t reuse IDs. Ever. For any reason…. Ever.IF you aren’t sure when making an HTML document if you’ll ever have more than one, then just use a class.
  • IDs are the most restrictive, and there should only ever be one matching ID in a document. Don’t reuse IDs. Ever. For any reason…. Ever.IF you aren’t sure when making an HTML document if you’ll ever have more than one, then just use a class.
  • Finally, selectors nest.
  • Finally, selectors nest. The section’s “h1” will be blue, but not h1’s that aren’t inside a section tag.
  • Selector Specificity is the algorithm used to decide which settings win when there’s a conflict
  • Even though we thought we were coloring the name Joe to be blue, it was overridden by the “#person div” selector. But why?
  • You must computer selector specificity.
  • This is a tabular example of what they’re talking about. It’s fine if you’re implementing a browser, but who wants to calculate just to figure out the winner?
  • If an element isn’t showing up the way you think it should, it’s easy to compare why one selector is winning over another one.
  • If an element isn’t showing up the way you think it should, it’s easy to compare why one selector is winning over another one.If one is greater than another, you’re done! That selector will win.If they’re equal, move onto the next selector grouping.
  • Going through this list one at a time would be boring, and you can look all these up. So instead, here are a couple real use-cases that use these selectors:”class” is just an attribute, so we can use these selectors to partially match them.
  • By this point you’re hopefully good and bored. Part of the reason people are so bad at CSS is because to do the cool interesting stuff, you have to really understand the dull boring stuff. And sadly, not enough designers bother getting to that point, instead opting to just start copy and pasting other people’s work. That’s fine, but it’s better to know yourself.
  • Tracking is letter-spacing
  • C5: How do we get an outline around our little stitching pattern here?
  • C6:
  • C7:
  • C8: shadows get blurrier the further away from the source. If you’re rotating, they also need to move to keep the light source the same.
  • Media represents the actual device you’re viewing your page on.
  • These may not be best practices, but they’re certainly things I like to do.
  • all values will be the same, including font sizes.Resets are built into most modern CSS libraries, YUI, blueprint, html5 boilerplate… but if you aren’t using one, just download the YUI Yahoo User Interface
  • An “em” (pronounced “em”, not E-M”) is a unit of measure that represents the text size. It’s a measure in typography back when metal blocks were cut for types. It’s roughly equivalent to the capital letter “M”.Anyway, in web browsers this typically defaults to 16px.The “html” is for older IE browsers, while body is for every other browser.
  • Interesting thing about layouts. It’s probably the most basic thing that all web designers need to do – but it’s not drop dead simple. You’re probably used to using floats, then clearfixing sections, and it’s never certain how it’ll act in browsers
  • The reality is there are many reasons to create columns. The simplest one is that you have some text you want in two columnsC9
  • You’ve probably done a multi-column layout. The standard method is to create a couple divs, give them each a width, then float them both so they line up side-by-side.Show HTML as sections setup using floats. Switch to boxesC9
  • Elastic layouts are similar to fixed, but based on ems rather than pixels. As font size increases, the container’s width attempts to match. However, resizing a container measured in ems won’t change the container size. Modern browsers are increasingly removing the necessity of elastic designs, since most now resize pixels as well.
  • Fluid layouts are based on percentages. So, you may have two columns where the left is 30% and the main column is 70%.
  • Responsive will change based on the device width. Use media queries to adjust layout.
  • The September monthly meetup is cancelled because, instead, we’re hosting RailsGirls. An international organization dedicated to increasing the presence of women who code.
  • ×