Post on 03-Jun-2018
transcript
8/12/2019 Better HTML & CSS Tutorial
1/101
WRITINGBETTER HTML & CSS
8/12/2019 Better HTML & CSS Tutorial
2/101
chriscoyier@gmail.com
@chriscoyier
CHRISCOYIER
8/12/2019 Better HTML & CSS Tutorial
3/101
8/12/2019 Better HTML & CSS Tutorial
4/101
BETTER?1 Less of it2 More Semantic
3 More Accessible
4 Futureproof
// Speed
// Maintainability
// SEO
// Happy People
8/12/2019 Better HTML & CSS Tutorial
5/101
231
8/12/2019 Better HTML & CSS Tutorial
6/101
HOW WUFOODOES CSS1
8/12/2019 Better HTML & CSS Tutorial
7/101
No inline styles or blocks
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.13432.css)Timestamped in development (dynamic.TIMESTAMP.css)
Reuse everything (e.g. table.css)
Work in chunks (e.g. print.css)
RULES
8/12/2019 Better HTML & CSS Tutorial
8/101
SIMPLIFIED SITE STRUCTURE
8/12/2019 Better HTML & CSS Tutorial
9/101
8/12/2019 Better HTML & CSS Tutorial
10/101
GLOBAL CSS
8/12/2019 Better HTML & CSS Tutorial
11/101
SITE SECTION CSS
8/12/2019 Better HTML & CSS Tutorial
12/101
SITE SECTION CSS
8/12/2019 Better HTML & CSS Tutorial
13/101
8/12/2019 Better HTML & CSS Tutorial
14/101
{autoVersion}/css/global/dynamic.css{/autoVersion}
{autoVersion}/css/landing/dynamic.css{/autoVersion}
Smarty function (could be any server side language)
8/12/2019 Better HTML & CSS Tutorial
15/101
AddHandlerapplication/x-httpd-php .php .html .xml .css .js
.htaccess
8/12/2019 Better HTML & CSS Tutorial
16/101
/css/global/dynamic.css
8/12/2019 Better HTML & CSS Tutorial
17/101
/css/landing/dynamic.css
8/12/2019 Better HTML & CSS Tutorial
18/101
1) Fetches all files
2) Minifies*
3) Combines Together*
4) Adds version number
AutoVersion function:
8/12/2019 Better HTML & CSS Tutorial
19/101
8/12/2019 Better HTML & CSS Tutorial
20/101
global/dynamic.css
Loaded on every page of site
Put as much as practical in here. User only loads thisfile once, so maximizes use of browser cache.
Common design patterns are in here(buttons.css, lightbox.css, forms.css)
8/12/2019 Better HTML & CSS Tutorial
21/101
area/dynamic.css
Loaded in specific area of site
Less common design patterns in here(graph.css, calendar.css, table.css)
8/12/2019 Better HTML & CSS Tutorial
22/101
global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css
/css/global/form.css
area/css/admin/manager.css
8/12/2019 Better HTML & CSS Tutorial
23/101
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
global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css/css/global/form.css
8/12/2019 Better HTML & CSS Tutorial
24/101
area/css/docs/docs.css/css/global/table.css
global/css/global/structure.css/css/global/buttons.css/css/global/lightbox.css
/css/global/form.css
8/12/2019 Better HTML & CSS Tutorial
25/101
ALLCSS
is in /css/
organized by
site section
8/12/2019 Better HTML & CSS Tutorial
26/101
2
8/12/2019 Better HTML & CSS Tutorial
27/101
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
BIG FANCY STYLE GUIDE
Good thinking Well intentioned
8/12/2019 Better HTML & CSS Tutorial
28/101
thats what
GLOBAL.CSSis for
8/12/2019 Better HTML & CSS Tutorial
29/101
NEED TO DEVIATE?Really? Do you?
BYSECTION
8/12/2019 Better HTML & CSS Tutorial
30/101
STYLEONLY
NEED TO DEVIATE?Really? Do you?
8/12/2019 Better HTML & CSS Tutorial
31/101
TOTALLYUNIQUE
NEED TO DEVIATE?Really? Do you?
8/12/2019 Better HTML & CSS Tutorial
32/101
DONTOVERTHINKIT
/* Good thing we specified this link is a
descendant of html, so none of those
crazy outsider links get this style */
htmlbody#page-wrap.innerulliullia{
font-size:0.8em;
}
lililili{
font-size:1.0em;
/* Erm, use REM */
}
a{ text-decoration:none;
}
/* Killing a fly with a jackhammer */
#page-wrapa{
text-decoration:underline;
}
/* Thus begins a nasty cycle */
asidea{
text-decoration:none!important;
}
8/12/2019 Better HTML & CSS Tutorial
33/101
CHALLENGE:Dont use IDs in your
CSS whatsoever forone small project.
Just try it
8/12/2019 Better HTML & CSS Tutorial
34/101
8/12/2019 Better HTML & CSS Tutorial
35/101
PSEUDOELEMENTS3:visited :hover :active :link
:first-child :last-child :nth-child() :nth-of-type():enabled :disabled :checked :indeterminate
:focus :target :root :lang()
pseudo classselectors
http://css-tricks.com/pseudo-class-selectors/
8/12/2019 Better HTML & CSS Tutorial
36/101
:before:after
8/12/2019 Better HTML & CSS Tutorial
37/101
In
div:before {content: "Robots ";
}
HTML
CSS
In
8/12/2019 Better HTML & CSS Tutorial
38/101
In
div:before {content: "Robots ";
}
In
div:after {
content: " Disguise";}
Robots Disguise
HTML
CSS
8/12/2019 Better HTML & CSS Tutorial
39/101
8/12/2019 Better HTML & CSS Tutorial
40/101
So whats withthe different name?
Pseudo selectorsselect elements thatalready exist(perhaps in different states).
Pseudo elementscreate new content thatdoesnt exist (yet).
8/12/2019 Better HTML & CSS Tutorial
41/101
::before::after
::first-line ::first-letter
8/12/2019 Better HTML & CSS Tutorial
42/101
:before:after
:first-line :first-letter
8/12/2019 Better HTML & CSS Tutorial
43/101
In
div:before {content: "Robots ";
}
In
div:after {
content: " Disguise";}
Robots Disguise
HTML
CSS
8/12/2019 Better HTML & CSS Tutorial
44/101
In
Resulting
HTML
(sorta)
8/12/2019 Better HTML & CSS Tutorial
45/101
Robots InDisguise
Notbefore/after the element...
Resulting
HTML
(sorta)
8/12/2019 Better HTML & CSS Tutorial
46/101
8/12/2019 Better HTML & CSS Tutorial
47/101
Blah blah blah
More stuff
Nothing to see here.Resulting
HTML
(sorta)
8/12/2019 Better HTML & CSS Tutorial
48/101
ELOT!
8/12/2019 Better HTML & CSS Tutorial
49/101
CAMELO
T!
CAMELO
T!
CAMELO
T!
8/12/2019 Better HTML & CSS Tutorial
50/101
8/12/2019 Better HTML & CSS Tutorial
51/101
BUTTONSWITHICONS
8/12/2019 Better HTML & CSS Tutorial
52/101
CSS
.button { /* Awesome gradients and stuff */}
.button img { /* Probably some margin and stuff */}
HTML
Visit Our Form Gallery
8/12/2019 Better HTML & CSS Tutorial
53/101
alt=""equals
Thats not important.Screen readers dont need to see that.
8/12/2019 Better HTML & CSS Tutorial
54/101
alt=""equals
Then get that mothersuckeroutof yourHTML
l b b ll h f h // f / ll /
8/12/2019 Better HTML & CSS Tutorial
55/101
HTML
CSS
.button { /* Awesome gradients and stuff */}
.button-gallery:before{ content:url(/images/icon_gallery.png);}
Visit Our Form Gallery
8/12/2019 Better HTML & CSS Tutorial
56/101
x200
Visit Our Form Gallery
200 extralines of HTML
200 places you arent being semantic
200 places you need to change one-by-one200 opportunities to be more efficient
8/12/2019 Better HTML & CSS Tutorial
57/101
8/12/2019 Better HTML & CSS Tutorial
58/101
Thats a website Its abstract Deal with it
8/12/2019 Better HTML & CSS Tutorial
59/101
8/12/2019 Better HTML & CSS Tutorial
60/101
8/12/2019 Better HTML & CSS Tutorial
61/101
CSS
html {
background: red;}
8/12/2019 Better HTML & CSS Tutorial
62/101
8/12/2019 Better HTML & CSS Tutorial
63/101
8/12/2019 Better HTML & CSS Tutorial
64/101
EFFICIENCY!
8/12/2019 Better HTML & CSS Tutorial
65/101
8/12/2019 Better HTML & CSS Tutorial
66/101
8/12/2019 Better HTML & CSS Tutorial
67/101
8/12/2019 Better HTML & CSS Tutorial
68/101
spritecow.com
8/12/2019 Better HTML & CSS Tutorial
69/101
8/12/2019 Better HTML & CSS Tutorial
70/101
UNFORTUNATENAME
8/12/2019 Better HTML & CSS Tutorial
71/101
h1:before {content: Wufoo;
}
h2:before {
content: Making forms easy + fast + fun;}
HTML
CSS
8/12/2019 Better HTML & CSS Tutorial
72/101
8/12/2019 Better HTML & CSS Tutorial
73/101
SCREEN READERS
NVDA doesnt read
Jaws doesnt read
Window Eyes doesnt read
VoiceOver (OS X) does read
Testing (mostly) by Lucica Ibanescuhttp://cssgallery.info/testing-the-accessibility-of-the-css-generated-content/
8/12/2019 Better HTML & CSS Tutorial
74/101
Bad for accessibilityBad semantically
Bad for SEO
8/12/2019 Better HTML & CSS Tutorial
75/101
content: ?
What can content be?
8/12/2019 Better HTML & CSS Tutorial
76/101
TEXT / STRINGcontent: $;content: \0022;
8/12/2019 Better HTML & CSS Tutorial
77/101
IMAGEcontent: url(i/icon-smile.png);content: -webkit-linear-gradient(...);
Behaves like an
Needs dimensions
8/12/2019 Better HTML & CSS Tutorial
78/101
ATTRIBUTEcontent: attr(href);content: attr(data-city);
8/12/2019 Better HTML & CSS Tutorial
79/101
COUNTERcontent: counter(li);
On li t
On list items
8/12/2019 Better HTML & CSS Tutorial
80/101
NOTHINGcontent: ;
8/12/2019 Better HTML & CSS Tutorial
81/101
HTMLcontent: Nope;
8/12/2019 Better HTML & CSS Tutorial
82/101
.price:before { content: $;}
[lang=cn] .price:before,.price[lang=cn]:before { content: \00a5;}
30100
8/12/2019 Better HTML & CSS Tutorial
83/101
http://www.456bereastreet.com/lab/styling-ordered-list-numbers/
ol { counter-reset: li; list-style: none;}ol > li:before { content: counter(li); counter-increment: li;
background: #666; color: white; padding: 10px;}
COMBINING WITH MEDIA QUERIES
8/12/2019 Better HTML & CSS Tutorial
84/101
COMBINING WITH MEDIA QUERIES
mobile portrait
CSS @media(min-width: 1001px){
aside li a:after {
8/12/2019 Better HTML & CSS Tutorial
85/101
aside li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666; }
}
@media(max-width: 1000px) and (min-width: 700px){
aside li a:before {
content: "Email: "; font-style: italic;
color: #666; }
}
@media(max-width: 699px) and (min-width: 520px),
(min-width: 1151px){
aside li a {
padding-left: 21px;
background: url(i/email.png) left center no-repeat; }
}
S lf!
8/12/2019 Better HTML & CSS Tutorial
86/101
Self!
You know whatwould be neat?
You fade inpseudo elements
on hover.
TOTAL
8/12/2019 Better HTML & CSS Tutorial
87/101
TOTALEPIC
FRICKINGDISASTER
8/12/2019 Better HTML & CSS Tutorial
88/101
You cant animate
or transitionpseudo elements.
8/12/2019 Better HTML & CSS Tutorial
89/101
8/12/2019 Better HTML & CSS Tutorial
90/101
a {
position: relative;}a:after { content: attr(data-tooltip); position: absolute; bottom: 100%;
left: 20px; background: yellow; opacity: 0;}a:hover:after { opacity: 1;
}a:before { /* triangle action */}
8/12/2019 Better HTML & CSS Tutorial
91/101
Nicolas
Dr. Pseudo ElementGallagher
http://nicolasgallagher.com/
@necolas
You cant talk about Pseudo Elements
without talking about...
8/12/2019 Better HTML & CSS Tutorial
92/101
8/12/2019 Better HTML & CSS Tutorial
93/101
Multiple Backgrounds Multiple Borders
Background Opacity
Clear Floats
Responsive Data Tables
http://css-tricks.com/9516-pseudo-element-roundup/
Sh !
8/12/2019 Better HTML & CSS Tutorial
94/101
Shapes!Theseare
easy.
Thesearelesseasy.
.star {
8/12/2019 Better HTML & CSS Tutorial
95/101
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;
}
8/12/2019 Better HTML & CSS Tutorial
96/101
http://css-tricks.com/examples/ShapesOfCSS/
http://css-tricks.com/examples/ShapesOfCSS/http://css-tricks.com/examples/ShapesOfCSS/http://css-tricks.com/examples/ShapesOfCSS/8/12/2019 Better HTML & CSS Tutorial
97/101
http://nicolasgallagher.com/pure-css-gui-icons/demo/
8/12/2019 Better HTML & CSS Tutorial
98/101
8/12/2019 Better HTML & CSS Tutorial
99/101
231
Links
8/12/2019 Better HTML & CSS Tutorial
100/101
Linkshttp://necolas.github.com/normalize.css/
http://snook.ca/archives/html_and_css/font-size-with-rem
http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/http://css-tricks.com/855-specifics-on-css-specificity/
Photoshttp://www.flickr.com/photos/webel/347801397/
TypeGotham Condensed
Gotham Rounded
TUNGSTENWhitney
8/12/2019 Better HTML & CSS Tutorial
101/101
Thanks!bit.ly/fowa-better-css