Using CSS3 in WordPress - Seattle WordCamp

In my travels, I have discovered that there is not much documentation on using CSS3 specifically in WordPress. While not many of the new CSS3 modules have reached official recommendation by the W3C, support is very good across all of the latest browsers. This session will aim to inform, enlighten, and delight attendees with the right way to include CSS in your WordPress theme using child themes or a plugin such as Jetpack, and we will also cover some of the best new features of CSS3 that you can put to work right away. You should be familiar with HTML and have some basic WordPress and CSS knowledge to get the most benefit from this talk.

Transcript

1. Using CSS3 in WordPress
   Suzette Franck
   2013 WordCamp Seattle
   Saturday, June 8, 2013
   Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   

   View Slide

2. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   Suzette Franck with a “ck”
   ★(mt) Media Temple WordPress Evangelist
   ★18+ Years Hand Coding & Web Development
   ★Regular Speaker: WordCamps & Meetups
   ★Reg. Contributor on WPwatercooler.com
   ★Blogs frequently at: suzettefranck.com
   ★Twitter: @mt_Suzette
   ★Slides: speakerdeck.com/suzettefranck
   

   View Slide

3. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   Suzette Franck with a “ck”
   ★Using WordPress Since 2008
   ★Exclusively Since 2010
   ★5-year-old Chihuahua Mix
   “Puppy”
   

   View Slide

4. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   What We Will Cover
   

   View Slide

5. • What is CSS?
   • Looking at CSS
   • CSS Selectors
   • Using CSS3 in WordPress
   • What’s New in CSS3
   • CSS3 Tricks
   Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   “Using CSS3 in WordPress”
   by Suzette Franck
   

   View Slide

6. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   What Is CSS?
   

   View Slide

7. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   What Is CSS?
   Cascading Style Sheets
   

   View Slide

8. • Coding language that defines the styles of a webpage
   • Used in conjunction with HTML
   • Controls layout and appearance of page elements
   • Keeps styles separate from HTML markup
   • Ability to share common styles across different pages
   • Provide portability of code
   • Completed in 1996, but most browsers didn’t support until 2007
   • If you are a web designer that wants to get into coding, CSS is for you!
   Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   What Are Cascading Style Sheets (CSS)?
   

   View Slide

9. • The World Wide Web Consortium (W3C)
   • International Standards Organization
   • Made up of 351 members & organizations
   • Defines recommendations for the Web
   • http://www.w3.org/
   Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   Who Makes This Stuff Up?
   

   View Slide

10. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Timeline
    CSS 1.0
    1996 1998
    CSS 2.0 CSS 2.1*
    2004-2011
    CSS 3.0
    1999-Current
    (modularized)
    CSS 2 or CSS
    

    View Slide

11. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Timeline
    CSS 1.0
    1996 1998
    CSS 2.0 CSS 2.1*
    2004-2011
    CSS 3.0
    1999-Current
    (modularized)
    CSS 2 or CSS
    *Most browsers did not fully adopt CSS standards until 2007!
    

    View Slide

12. • http://validator.w3.org/unicorn/
    • Unicorn: tests against current W3 Recommendations
    • Use as a guideline
    • Newer features will throw errors
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Validation
    

    View Slide

13. • http://validator.w3.org/unicorn/
    • Unicorn: tests against current W3 Recommendations
    • Use as a guideline
    • Newer features will throw errors
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Validation
    

    View Slide

14. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Looking at CSS
    Examination of what has been done previously
    is the key to learning efficiently
    

    View Slide

15. • Any Plain Old Text Editor
    • Sublime Text 2 or Coda 2 for Mac
    • Notepad++ for PC
    • Latest Version of FireFox
    • Firebug Extension for FireFox
    • Colorzilla Extension for FireFox
    • Good Google Skills
    • Time and Curiosity
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Tools
    +
    

    View Slide

16. • FireFox with FireBug and Colorzilla Extensions
    • http://www.htmlgoodies.com/beyond/css/firebug-an-overview.html
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Examining CSS
    

    View Slide

17. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Coding Best Practices
    • Indent and use spaces
    • Separate declarations on a individual lines
    • Use shorthand versions when possible
    • Comment liberally
    • Principles of writing consistent, idiomatic CSS
    by Nicolas Gallagher
    • https://github.com/necolas/idiomatic-css
    

    View Slide

18. • Zeros out browser defaults:
    margin, border, padding, font-sizes, line-heights
    • Clears floats, sets display properties, etc.
    • Consistency of defaults across browsers
    • Good themes use them
    • Beginning of stylesheet
    • Normalize: http://git.io/normalize
    • Reset: http://meyerweb.com/eric/tools/css/reset/
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Resets/Normalizing
    

    View Slide

19. • Build cross-browser sites with tried and true standards
    • Add additional features that degrade gracefully
    • Consider your audience
    • Definitely consider Mobile
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Progressive Enhancement
    

    View Slide

20. • Test on different platforms with different browsers
    • Variety of browser extensions to change user agent and screen width
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Browser Testing
    

    View Slide

21. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Selectors
    To apply CSS, select the text to change
    

    View Slide

22. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Terminology of CSS Rules
    

    View Slide

23. • More specific and closest in proximity takes precedence
    • IDs take precedence over classes
    • !important; trumps all
    • If multiple rules apply, the last one loaded wins
    • More info at:
    http://css-tricks.com/specifics-on-css-specificity/
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Specificity
    “Yahtzee or Poker for Styles”
    

    View Slide

24. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Element Selector
    Selects any and all HTML elements with matching tag
    

    View Slide

25. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Class Selector
    Selects any HTML element containing the matching class
    

    View Slide

26. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    ID Selector
    • Selects the HTML element containing matching ID
    • Each ID used only once per page, last one wins
    • IDs are indexed by the browser
    • Faster to render than classes
    • Takes precedence over classes
    • Most specific way to designate an HTML element
    

    View Slide

27. • Ignored by
    browsers
    • Documents code
    • Use liberally!
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Comments
    

    View Slide

28. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Pseudo Classes
    :hover
    :visited
    :first-child
    :last-child
    :first-letter
    :first-line
    

    View Slide

29. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS Selectors That Rock
    http://web-design-weekly.com/2012/05/31/css-selectors-that-rock/
    

    View Slide

30. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Twenty Thirteen Stylesheet
    Tip: WordPress 20xx default themes are great to study from!
    

    View Slide

31. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Using CSS3 in
    WordPress
    The Right Way
    

    View Slide

32. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Where Does CSS NOT Go?
    • Manually linked in between tags in the header.php
    of your WordPress theme like so:
    
    • http://goo.gl/D0Pv4
    

    View Slide

33. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Where Does CSS NOT Go?
    • Manually linked in between tags in the header.php
    of your WordPress theme like so:
    
    • http://goo.gl/D0Pv4
    

    View Slide

34. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Where Does CSS NOT Go?
    • Manually linked in between tags in the header.php
    of your WordPress theme like so:
    
    • http://goo.gl/D0Pv4
    

    View Slide

35. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Where Does CSS NOT Go?
    • Manually linked in between tags in the header.php
    of your WordPress theme like so:
    
    • http://goo.gl/D0Pv4
    WRONG
    

    View Slide

36. 1. Inline in WordPress Page/Post editor (only for emergencies)
    2.If available...in theme’s or plugin’s “Custom CSS” section
    3.In child theme’s style.css
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Where Does CSS in WordPress Go?
    

    View Slide

37. • Click on Text view in WordPress Editor
    • add code to HTML element:
    text
    • Use sparingly!
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Inline CSS in Text Editor
    

    View Slide

38. • Many themes have an option to add Custom CSS (WooThemes)
    • Jetpack Plugin custom CSS module, adds Appearance > Edit CSS
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Custom CSS
    

    View Slide

39. • Preserve future upgradability of parent theme
    • Preserves your custom modifications
    • Allows you to keep parent themes updated with latest version
    • Takes on code of parent theme
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Why Child Themes?
    

    View Slide

40. • Using SFTP...create a folder under wp-content/themes/
    • Create plain text file style.css and copy required header to theme’s root folder
    • More Info:
    http://codex.wordpress.org/Child_Themes
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Creating Child Themes
    

    View Slide

41. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    What’s New in CSS3?
    

    View Slide

42. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    What’s New in CSS3?
    Modularization
    

    View Slide

43. • Are necessary evil of CSS3, but will be phased out like border-radius
    • prefixr.com
    • CSS Preprocessor like Sass
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Vendor Prefixes
    

    View Slide

44. • 130 New Color Keywords + 17 previously = 147
    • http://www.w3schools.com/cssref/css_colornames.asp
    • RGBA (red, green, blue, alpha)
    • HSLA (hue, saturation, lightness, alpha)
    • Opacity Property (applies to children)
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Colors
    

    View Slide

45. • Specify colors, separated by commas
    • Specify stops or distributed evenly
    • Specify angle of gradient
    • Linear gradients well supported, circular not so much
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Gradients
    

    View Slide

46. • Specify different images separated by commas
    • Stacking order is first to top, last to bottom
    • Can be combined with a linear gradient background
    • New! background-size: cover; /*stretches to fill page*/
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Multiple Background Images
    

    View Slide

47. • Shorthand can be used
    • Specify each corner from top left clockwise
    • Border images are cool but not well supported
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Rounded Corners
    

    View Slide

48. • Specify multiple shadows, separated with commas
    • Box: horizontal offset, vertical offset, blur, spread, color
    • Text: horizontal offset, vertical offset, blur, color
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Box & Text Shadows
    

    View Slide

49. • Translate: move up and down, left to right
    • Transform: rotate, scale, skew
    • w3schools.com/cssref/css3_pr_transform.asp
    • Specify multiple transforms separated by spaces
    • Use on any element, class, or id
    • Magical when used with :hover
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Transforms
    

    View Slide

50. • Transforms with added duration, delay, and/or easing
    • Define default state with transition instructions
    • Define :hover state
    • Specify multiple transforms, separated by commas
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Transitions
    

    View Slide

51. • Minimally specify beginning & end frames
    • Specify on element to be applied to:
    • animation-name (you define)
    • animation-duration (seconds)
    • animation-iteration-count (infinite or number)
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Animations @keyframes
    

    View Slide

52. • Way to include font file in CSS
    • http://www.fontsquirrel.com/
    • http://www.fontsquirrel.com/tools/webfont-generator
    • Add @font-face declarations near the top of the style sheet
    • Always check font licensing to see if web embedding is allowed
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    @font-face
    

    View Slide

53. • Specify rules depending on screen min-width / max-width
    • Building blocks of responsive design
    • Typically at end of stylesheet
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    @media queries
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    

    View Slide

54. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    mediaqueri.es
    

    View Slide

55. • CSS3Pie.com
    Progressive Internet Explorer
    • Modernizr
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Much Ado About IE
    

    View Slide

56. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Tricks
    

    View Slide

57. http://suzettefranck.com/css3/
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Demo!
    Click the Magical WordPress Unicorn
    

    View Slide

58. http://suzettefranck.com/css3/
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Demo!
    Click the Magical WordPress Unicorn
    

    View Slide

59. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Interesting CSS3 Tricks
    ★At-At Walker From Star Wars
    ★webdesignerwall.com
    ★CSS3 Patterns Gallery
    ★CSS Social Media Icons
    ★Twitter Fail Whale in CSS
    

    View Slide

60. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Resources
    ★http://css-tricks.com/
    ★http://wordpress.tv/?s=Chris+Coyier
    ★http://www.css3.info/
    ★http://reference.sitepoint.com/css
    ★http://coding.smashingmagazine.com/tag/css/
    ★http://w3schools.com (Not related to W3C)
    

    View Slide

61. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    CSS3 Generators
    ★http://css3generator.com/
    ★http://css3please.com/
    ★http://www.css3.me/
    ★http://www.css3maker.com/
    ★http://css3.mikeplate.com/
    ★http://mothereffingtextshadow.com/
    

    View Slide

62. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Questions?
    

    View Slide

63. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Questions?
    Suzette Franck
    sfranck@mediatemple.net
    https://speakerdeck.com/suzettefranck
    @mt_Suzette
    

    View Slide