HARDCORE CSS         Eric Redmond                     @coderoshi  PDX Web & Design
A SHORT HISTORY OF   Hardcore                     CSS              CSS
CSS Cascading Style Sheets           A SHORT Separates style from             HISTORY                                  ...
Cascading HTML style sheets – a proposal            A SHORT Oct 10, 1994                  HISTORY                       ...
Cascading HTML style sheets – a proposal            A SHORT Oct 10, 1994                  HISTORY                       ...
Cascading HTML style sheets – a proposal Oct 10, 1994                      A SHORT Håkon Lie (CERN)                  HI...
CSS2 1998 Level 2 was proposed       A SHORT Adoption was relatively fast    HISTORY                                  O...
HardcoreSELECTORS   CSS
UniversalElementsClasses           SELECTORSIDsAttributesPseudo classesPseudo elements
<em>I’m Arial too!</em>*{                          SELECTORS  font-family: Arial;     U n i v e r s al}
<strong> hulk smash</strong>                              SELECTORS                              Elementsstrong {  color: ...
<span class=superhero> Iron Man</span>                                                SELECTORS                           ...
<div id=main> My main content.</div>                            SELECTORS                            IDs#main {  border:1p...
<article role=main> My main content.</article>                            SELECTORS                            IDs[role=ma...
<ul> <li>Item 1</li> <li>Item 2</li>                   SELECTORS</ul>              Pseudo Classesli:first-child {  color:r...
<h1> Excelsior</h1>                  SELECTORS                  Pseudo                  Elementsh1:after {  content: !;}
<h1>Page Title<h1><section> <h1>Section Title</h1>                          SELECTORS</section>                Nestingsect...
<h1>Page Title<h1><section> <h1>Section Title</h1>                          SELECTORS</section>                Nestingsect...
HardcoreSPECIFICITY   CSS
<section id=person><div id=name>Joe</div><div>A nice guy</div>    SELECTOR                         SPECIFICIT Y</section> ...
SELECTORSPECIFICIT Y
SELECTOR…What?   SPECIFICIT Y
SELECTOR SPECIFICIT Ywww.w3.org/TR/css3-selectors/#specificityCalculating a selectors specificity  count the number of ...
CALCULATIONSelector         a   b    c   Specificity*                0   0    0      0li               0   0    1      1ul...
EASIER WAYI.C.A.T.  IDs > Classes/Attributes > Types  Pseudos are of their kind    Pseudo-classes are classes    Pseu...
EASIER WAY1. Compare the count of IDs  div#content *[role=main] section#person = 2  section#person div#name .superhero:l...
HardcoreADVANCED(ISH) DETAILS   CSS
The Box Model                 THE BOX                 MODEL
More Box Model                  THE BOX                  MODEL
[attr]      – attr exists[attr=val] – value equals                                   ATTRIBUTE[attr~=val] – exists in  ...
:nth-child(N):nth-last-child(N)                      PSEUDO:nth-of-type(N)      CLASSES:first-child:last-child:empty...
HardcoreCSS3 FUN THINGS   CSS
Fonts Typekit Google Fonts FontSquirrelBaby Typography Tracking (not Kerning) LeadingShadows
Boxes Border types Border Radius Outline Box Shadowbox-shadow: 6px 6px 6px 6px #666; [right] [down] [blur] [width] #[...
Backgrounds Gradients    lea.verou.me/demos/cssgradient     splease Patterns    lea.verou.me/css3patternsbackground-i...
Transforms Most browsers require a prefix -o-transform: …; -ms-transform: …; -moz-transform: …; -webkit-transform: …;
Rotate transform: rotate(20deg);Scale transform: scale(2, 2);
Transitions Best in reaction to something! Timing Easing
HardcoreMEDIA   CSS
MEDIA T YPESMedia Type   Descriptionall          All media type devicesaural        Speech and sound synthesizersbraille  ...
External Media Attribute <link  rel="stylesheet”  media="print"             MEDIA  href="printer.css" />Inline Media Rul...
Hardcore(BEST?) PRACTICES   CSS
Problem: Browsers still have different  default behaviors               BEST                                  PRACTICES...
*{  vertical-align: baseline;  font-weight: inherit;       BEST                              PRACTICES  font-family: inher...
yui.yahooapis.com/3.5.1 /build/cssreset /cssreset.css
Problem: Some Browsers  (*cough*IE*cough*) do not   BEST  recognize HTML5 elements    PRACTICES                         ...
Problem: Some browsers pre  implemented CSS3                BEST                                  PRACTICESSolution:   ...
Problem: EMs are inconsistentSolution:                BEST                          PRACTICES Set font size to 10px   ...
HardcoreLAYOUTS   CSS
Classic floats One True Layout    positioniseverything.net/articles/     onetruelayout                        LAYOUTS  ...
Multicolumns                LAYOUTS                CSS3                M u l t ic o l umn s
Display Box               LAYOUTS               C S S 3 D i s p l ay               B ox
Elastic           LAYOUTS           Elastic
Fluid         LAYOUTS         Fluid
Responsive Just change layout using  media queries                              LAYOUTS                              Re ...
Summer Social & Lightning Talks                                           PDX W&D UPCOMING  Thursday, Aug 9  Webtrends (th...
Upcoming SlideShare
Loading in …5
×

Hardcore CSS

1,826 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,826
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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. HardcoreSELECTORS 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 Elementsstrong { 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 Classesli:first-child { color:red;}
    16. 16. <h1> Excelsior</h1> SELECTORS Pseudo Elementsh1:after { content: !;}
    17. 17. <h1>Page Title<h1><section> <h1>Section Title</h1> SELECTORS</section> Nestingsection h1 { color:blue;}
    18. 18. <h1>Page Title<h1><section> <h1>Section Title</h1> SELECTORS</section> Nestingsection h1 { color:blue;}
    19. 19. HardcoreSPECIFICITY 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. SELECTORSPECIFICIT Y
    22. 22. SELECTOR…What? SPECIFICIT Y
    23. 23. SELECTOR SPECIFICIT Ywww.w3.org/TR/css3-selectors/#specificityCalculating a selectors 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. CALCULATIONSelector a b c Specificity* 0 0 0 0li 0 0 1 1ul li 0 0 2 2ul li:after 0 0 3 3h1 *[rel=up] 0 1 1 11ul li span.red 0 1 3 13li.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 WAY1. Compare the count of IDs  div#content *[role=main] section#person = 2  section#person div#name .superhero:last = 22. Compare the count of Classes+Attributes  div#content *[role=main] section#person = 1  section#person div#name .superhero:last = 13. Compare the count of Types  div#content *[role=main] section#person = 2  section#person div#name .superhero:last = 3
    27. 27. HardcoreADVANCED(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. HardcoreCSS3 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 Shadowbox-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/css3patternsbackground-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. HardcoreMEDIA CSS
    40. 40. MEDIA T YPESMedia Type Descriptionall All media type devicesaural Speech and sound synthesizersbraille Braille tactile feedback devicesembosses Paged braille printershandheld Small or handheld devicesprint Printersprojection Projected presentations, like slidesscreen Computer screens (and mobile screens)tty Media using a fixed-pitch character grid, like terminalstv 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 shtml, body { font-size:10px;}
    49. 49. HardcoreLAYOUTS 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)

    ×