Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using CSS3 in WordPress - Seattle WordCamp

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.

6224f65dc0d9288ca4c9817d993d8ca4?s=128

Suzette Franck

June 08, 2013
Tweet

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
  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
  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”
  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
  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
  6. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What Is CSS?
  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
  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)?
  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?
  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
  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!
  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
  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
  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
  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 +
  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
  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
  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
  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
  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
  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
  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
  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”
  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
  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
  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
  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
  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
  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/
  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!
  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
  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 <head> tags in the header.php of your WordPress theme like so: <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> • http://goo.gl/D0Pv4
  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 <head> tags in the header.php of your WordPress theme like so: <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> • http://goo.gl/D0Pv4
  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 <head> tags in the header.php of your WordPress theme like so: <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> • http://goo.gl/D0Pv4
  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 <head> tags in the header.php of your WordPress theme like so: <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> • http://goo.gl/D0Pv4 WRONG
  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?
  37. • Click on Text view in WordPress Editor • add

    code to HTML element: <p style=”property: value; property2: value;” >text</p> • 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
  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
  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?
  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
  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?
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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/
  54. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple mediaqueri.es
  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
  56. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Tricks
  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
  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
  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
  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)
  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/
  62. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions?
  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