WRITE BETTER HTML BY WRITING BETTER CSS

Size: px

Start display at page:

Download "WRITE BETTER HTML BY WRITING BETTER CSS"

Florence Harrell
8 years ago
Views:

1 WRITE BETTER HTML BY WRITING BETTER CSS

2 THE ROYAL WE Chris

3 BETTER? 1 Less of it 2 More Semantic 3 More Accessible 4 Futureproof // Speed // Maintainability // SEO // Happy People

4 123

5 1 HOW WUFOO DOES CSS

6 RULES Only 2 CSS files per page (Global + Site Section) These 2 are made from combined smaller files (like design patterns or site sub sections) Versioned in production (dynamic css) Timestamped in development (dynamic.css?time=xxx) No inline styles or <style> blocks Reuse everything (e.g. table.css) Work in chunks (e.g. print.css)

7 SIMPLIFIED SITE STRUCTURE

8 GLOBAL CSS

9 GLOBAL CSS

10 SITE SECTION CSS

11 SITE SECTION CSS

13 <!DOCTYPE html> <head> {autoversion}/css/global/dynamic.css{/autoversion} {autoversion}/css/landing/dynamic.css{/autoversion} Smarty function (could be any server side language)

14 .htaccess AddHandler application/x-httpd-php.php.html.xml.css.js

15 /css/global/dynamic.css <?php require_once($globals['root'].'/library/services/ AutoVersion.php'); $filearray = array( '/css/global/structure.css', '/css/global/buttons.css', '/css/global/lightbox.css', '/css/global/form.css' ); $av = new AutoVersion(); $av->fly($dynamicurl,$filearray);?>

16 /css/landing/dynamic.css <?php require_once($globals['root'].'/library/services/ AutoVersion.php'); $filearray = array( '/css/landing/structure.css', '/css/landing/table.css', '/css/landing/else.css', '/css/landing/signup.css', '/css/landing/tour.css' ); $av = new AutoVersion(); $av->fly($dynamicurl,$filearray);?>

17 AutoVersion function 1) Fetches all files 2) Combines together 3) Minifies 4) Adds version number

18 <!DOCTYPE html> <head> <link rel="stylesheet" href="/css/global/dynamic.1234.css"> <link rel="stylesheet" href="/css/landing/dynamic.1234.css">

19 global/dynamic.css Loaded on every page of site Put as much as practical in here. User only loads this file once, so maximizes use of browser cache. Common design patterns are in here (buttons.css, lightbox.css, forms.css)

20 area/dynamic.css Loaded in specific area of site Less common design patterns in here (graph.css, calendar.css, table.css)

21 global /css/global/structure.css /css/global/buttons.css /css/global/lightbox.css /css/global/form.css area /css/admin/manager.css

22 global /css/global/structure.css /css/global/buttons.css /css/global/lightbox.css /css/global/form.css area /css/widgets/datagrid.css /css/global/filter.css /css/global/calendar.css /css/global/quicksearch.css /css/entries/structure.css /css/entries/print.css

23 global /css/global/structure.css /css/global/buttons.css /css/global/lightbox.css /css/global/form.css area /css/docs/docs.css /css/global/table.css

24 ALL CSS is in /css/ organized by site section

25 2 DON T OVER THINK IT

26 Good thinking Well intentioned BIG FANCY STYLE GUIDE Primary color #BADA55 / Secondary color #F00 Headers should be 20px from navigation and 15px from following content Logo should have 30px of padding around it Links should have 1px dotted bottom borders

27 that s what GLOBAL.CSS is for

28 BY SECTION NEED TO DEVIATE? Really? Do you?

29 STYLE ONLY NEED TO DEVIATE? Really? Do you?

30 TOTALLY UNIQUE NEED TO DEVIATE? Really? Do you?

31 DON T OVER THINK IT

32 3 :visited PSEUDO ELEMENTS :hover :active :link pseudo selectors class :first-child :last-child :nth-child() :nth-of-type() :enabled :disabled :checked :indeterminate :focus :target :root :lang()

33 :before :after

34 HTML <div>in</div> CSS div:before { content: "Robots "; } In

35 HTML <div>in</div> CSS div:before { content: "Robots "; } div:after { content: " Disguise"; } Robots In Disguise

37 So what s with the different name? Pseudo selectors select elements that already exist (perhaps in different states). Pseudo elements create new content that doesn t exist (yet).

38 ::before ::after ::first-line ::first-letter

39 :before :after :first-line :first-letter

40 HTML <div>in</div> CSS div:before { content: "Robots "; } div:after { content: " Disguise"; } Robots In Disguise

41 Resulting HTML (sorta) <div> In </div>

42 Resulting HTML (sorta) Robots <div> In </div> Disguise Not before/after the element...

43 Resulting HTML (sorta) <div> Robots In Disguise </div> It s before/after the content inside.

44 Resulting HTML (sorta) <div> <h1>blah blah blah</h1> <p>more stuff</p> Nothing to see here. </div>

45 Resulting HTML (sorta) <div> Robots <h1>blah blah blah</h1> <p>more stuff</p> Nothing to see here. Disguise </div>

46 CAMELOT! CAMELOT! CAMELOT! It s only a model... (Not really in DOM)

47 Not for no content elements <img src= robot.jpg alt= Robot > <input type= name= /> <br> Allows but shouldn t Styles as if was inside Checkboxes Radio Buttons

48 HTML <a class= button href= > <img src= /images/icon_gallery.png alt= > Visit Our Form Gallery </a> CSS.button { /* Awesome gradients and stuff */ }.button img { /* Probably some margin and stuff */ }

49 alt="" equals That s not important. Screen readers don t need to see that.

50 alt="" equals Then get that mothersucker out of your HTML

51 HTML <a class= button button-gallery href= > Visit Our Form Gallery </a> CSS.button { /* Awesome gradients and stuff */ }.button-gallery:before { content: url(/images/icon_gallery.png); }

52 x200 <a class= button href= > <img src= /images/icon_gallery.png alt= > Visit Our Form Gallery </a> 200 extra lines of HTML 200 places you aren t being semantic 200 places you need to change one-by-one 200 opportunities to be more efficient

54 <html style= background: yellow; > That s a website. It s abstract. Deal with it.

56 CSS

57 CSS html { background: red; }

60 Efficiency!

62 <a class= button button-gallery href= > Visit Our Form Gallery </a> x200.button-gallery:before { content: url(/images/icon_gallery.png); content: ; display: inline-block; width: 16px; height: 16px; background-image: url(/images/sprite.png); background-position: -32px -32px; }

63 spritecow.com

64 spriteme.org

65 RABBLE RABBLE RABBLE!

66 HTML <h1></h1> <h2></h2> CSS h1:before { content: Wufoo ; } h2:before { content: Making forms easy + fast + fun ; }

67 Bad for accessibility Bad semantically Bad for SEO

68 SCREEN READERS NVDA Jaws Window Eyes VoiceOver (OS X) doesn t read doesn t read doesn t read does read Testing (mostly) by Lucica Ibanescu

69 What can content be?.thing:before { content:? }

70 TEXT / STRING content: $ ; content: \0022 ;

71 IMAGE Behaves like an <img> content: url(i/icon-smile.png); content: -webkit-linear-gradient(...); Needs dimensions

72 ATTRIBUTE content: attr(href); content: attr(data-city);

73 On list items COUNTER content: counter(li); counter-increment: li; counter-reset: li; On list

74 NOTHING content: ;

75 HTML content: <h1>nope</h1> ;

76 TEXT / STRING <div class="price">30</div> <div class="price" lang="cn">100</div> [lang= cn ].price:before,.price[lang= cn ]:before { content: \00a5 ; }

77 COUNTER ol { counter-reset: li; } ol > li:before { content: counter(li); counter-increment: li; }

78 ATTRIBUTE <a href= # data-tooltip= is hot. > Your mom </a> a[data-tooltip] { position: relative; } a[data-tooltip]:after { content: attr(data-tooltip); position: absolute; /* Fancy styles */ opacity: 0; } a[data-tooltip]:hover:after { opacity: 1; }

79 COMBINING WITH MEDIA QUERIES

80 mobile portrait mobile landscape tablet small monitor large monitor

81 You can t talk about Pseudo Elements without talking about... Nicolas Dr. Pseudo Element Gallagher

83 Shapes! These are easy. These are less easy.

84 .star { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; }.star:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }

87 Remember, CSS TWO not THREE Browser Support CSS-Tricks 97% 85% Other tech 92% positioning issues :: / :hover / z-index

88 MORE

89 Links Photos Type Gotham Condensed Gotham Rounded TUNGSTEN Whitney

90 Thanks!

How to make a custom Joomla template!

How to make a custom Joomla template! Part 2 NOTE: This Tutorial has been donated by a Thomas Nielsen. This work is licensed under a Creative Commons Attributon NonCommercial ShareAlike 2.5 License. Lets