Using CSS3 with WordPress Vegas 2013

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.

Transcript

1. Using CSS3 in WordPress Suzette Franck 2013 WordCamp Las Vegas Sunday, December 15, 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” ★WordPress Evangelist @ Media Temple ★Born in Hollywood, California Native ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★Spoke at 12 WordCamps & WordSesh ★Attended 78 WordPress Meetups, spoke at 25 ★Reg. Contributor on WPwatercooler.com ★Hosted DradCast Episode 17 ★Blogs at: suzettefranck.com ★Slides: speakerdeck.com/suzettefranck Follow me! @mt_Suzette
3. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What We Will Cover
4. • What is CSS? • Inspecting CSS • CSS Selectors • Using CSS3 in WordPress • What’s New in CSS3 Demo 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
5. 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
6. • Coding language that defines the styles of a webpage • Used in conjunction with HTML • Controls layout and appearance of HTML elements • Keeps styles separate from HTML markup • Ability to share common styles across different pages • Provides 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)?
7. • 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?
8. 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!
9. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inspecting CSS Examination of what has been done previously is the key to learning efficiently
10. • 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 +
11. • 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
12. 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
13. • 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
14. • Build cross-browser sites with tried and true standards • Add additional features that degrade gracefully • Always 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
15. 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, target the HTML element to change
16. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Terminology of CSS Rules
17. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple IDs and Classes • classes can be added to any HTML element <h1 class=”title”> • IDs are more specific than classes, but used similarly <h1 id=”title”> • Both can not start with a number • Both must be named uniquely • Use semantic names over attribute names • “title” is better then “redbold” for a name • What is the difference?
18. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple IDs • IDs can only be used once on a page • IDs indexed by the browser • Fancy things can be done with IDs & Javascript • Loaded a bit faster than classes • Specified with #title on the stylesheet <h1 id=”title”>My Rad Title</h1>
19. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple classes • Use on any HTML element i.e. div, span, p • Define a style for all instances of that class • Classes make the world go round • Specified as .title on the stylesheet <h1 class=”title”>My Rad Title</h1>
20. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple <h1 class=”title”>My Rad Title 2</h1> <h1 id=”title”>My Rad Title 1</h1> • Classes and IDs are independent of each other • Class and ID be the same name • Treated as two separate entities
21. • 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”
22. 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
23. 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
24. 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
25. • 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
26. 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
27. 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/
28. 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!
29. 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
30. 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
31. 1.Inline in WordPress Page/Post editor (frowned upon) 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?
32. • 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
33. • 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
34. • 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?
35. • 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
36. 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
37. • Are necessary evil of CSS3 • Eventually will be phased out • prefixr.com or CSS3 generator • CSS Preprocessor like SASS or LESS Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Vendor Prefixes
38. • 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
39. • 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
40. • 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
41. • 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
42. • 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
43. • 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
44. • 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
45. • 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
46. • 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
47. • 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/
48. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple mediaqueri.es
49. • CSS3Pie.com • 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
50. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS3 Tricks
51. 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)
52. 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/
53. 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
54. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions? Suzette Franck suzette@mediatemple.net https://speakerdeck.com/suzettefranck @mt_Suzette