Download - CSS For Backend Developers
CSS FOR BACKEND DEVS
Created by / Marta Sztybor (http://martasztybor.pl) @sztyborek (http://twitter.com/sztyborek)
IF YOU'VE EVER FELT LIKE THIS WHILEEDITING CSS...
...THIS TALK IS FOR YOU.
LET'S TALK ABOUT BASICS FIRST
HTML SEMANTICS!
Semantic HTML is the use of HTML markup to reinforce thesemantics, or meaning, of the information in webpages and webapplications rather than merely to define its presentation or look.
‐‐ Wiki (https://en.wikipedia.org/wiki/Semantic_HTML)
WHY?
It's SEO‐friendly.Solves
(eg. using button tag for buttons, not styled a tag).It adds meaning and increases readability of your code.
most problems with accessibility(https://www.marcozehe.de/2015/12/14/the‐web‐accessibility‐basics/)
HOW?
Divitis!
<div id="header"> <div id="logo"></div></div><div id="topNav"></div><div id="leftCol"></div><div id="rightCol"></div><div id="footer"></div>
THE SOLUTION
<header> <div id="logo"></div></header><nav></nav>
<aside></aside><main></main>
<footer></footer>
RESOURCES
‐ how the HTML semantics matters for accessibility
MDN HTML element reference(https://developer.mozilla.org/en/docs/Web/HTML/Element)HTML document outline on MDN (https://developer.mozilla.org/en‐US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document)Let's talk about semantics (http://html5doctor.com/lets‐talk‐about‐semantics/)Accessibility basics (https://www.marcozehe.de/2015/12/14/the‐web‐accessibility‐basics/)A look into proper HTML5 semantics (http://www.hongkiat.com/blog/html‐5‐semantics/)
BEFORE YOU BEGIN STYLINGIt's important to add some
or .
They'll help you to cope with most of the browser inconsistencies.Such stylesheets are usually included in frameworks (usually don't botherif you are using a framework).Why? I'll explain in the next few slides.
normalize(https://necolas.github.io/normalize.css/) reset(http://meyerweb.com/eric/tools/css/reset/)
AND HERE IS WHERE THE PARTYBEGINS!
Cascade, specificity & inheritanceBox modelDisplay propertyPositioning & floatsResponsive web design
CSS RULES' WARSCascadingInheritanceSpecificity
CASCADING ORDERFROM LOWEST TO HIGHTEST
1. User agent normal stylesheets2. User agent !important stylesheets3. User normal stylesheets4. Author normal stylesheets5. Author !important stylesheets6. User !important stylesheets
INHERITANCE (VS CASCADE)
Inheritance is about how properties trickle down from an element toits children. Certain properties, like font‐family inherit. If you set afont‐family on the body, that font family will be inherited by all theelements within the body. (...)
The cascade is about what take precedence when there is a conflict.
‐‐ Miriam Suzanne on Stackoverflow(http://stackoverflow.com/questions/2406884/in‐css‐what‐is‐the‐difference‐between‐cascading‐and‐inheritance)
INHERITED VALUEScolorfont‐familyfont‐sizefont‐stylefont‐variantfont‐weightfonttext‐align
NON-INHERITED VALUESbackgroundborderdisplayfloatwidthheighttop, right, bottom, leftmarginpadding
SPECIFICITYSELECTORS SPECIFICITY SORTED FROM LOWEST TO HIGHEST
1. Element and pseudo‐element
div p::after
2. Class, pseudo‐class and attribute
.container
.listitem:firstchild [href^='https://']
3. IDs
#userschart #mainnav
4. Inline styles
<ul style="liststyletype: none"></ul>
Attributes with !important overide even inline styles.
CALCULATING SPECIFICITY1. For every element or pseudo‐element add 1
0 0 0 1
2. For every class, pseudo‐class or attribute add 100 0 1 0
3. For every ID add 1000 1 0 0
4. For inline style add 10001 0 0 0
WHICH SELECTOR WINS THE BATTLE?UL#MAIN‐NAV .SELECTED‐ITEM [HREF=^"HTTPS://"]
0 1 2 1
UL.NAV‐WRAP LI:NTH‐CHILD(5) A
0 0 2 3
LEARN CSS SPECIFICITY WITH THE GALACTICEMPIRE
(HTTPS://STUFFANDNONSENSE.CO.UK/ARCHIVES/CSS_SPECIFICITY_WARS.HTML)
MAY THE SPECIFICITY FORCE BE WITH YOUTry to keep your selectors specificity as low as possible, as they'll beeasier to understand and maintain.In general, it's recommended to organize selectors in a stylesheet with anincreasing specificity.Avoid ID selectors, because they are hard to override.Try using naming conventions such as
,
or .
BEM(http://getbem.com/introduction/) BEMIT(http://csswizardry.com/2015/08/bemit‐taking‐the‐bem‐naming‐convention‐a‐step‐further/) SUIT (http://suitcss.github.io/)
RESOURCES
on MDN
on CSS‐Tricks
About CSS specificity (https://developer.mozilla.org/en‐US/docs/Web/CSS/Specificity)CSS Specificity is base‐infinite (https://css‐tricks.com/css‐specificity‐is‐base‐infinite/)
BOX MODEL
Mama always said life was like a box of chocolates. You never knowwhat you're gonna get.
‐‐ Forest Gump
CSS is like a box of chocolates. You never know what you're gonnaget.
‐‐ Developer
WHAT IS THE MAGICAL BOX MODEL?
source: W3C (http://www.w3.org/TR/CSS21/box.html)
THE PROBLEM
width: 300px
Declared box width: 300px
Rendered box width: 342px
Oh my! It doesn't compute!
.boxofchocolates width: 300px; padding: 20px; border: 1px solid #333;
THE SOLUTION
Rendered width = content + padding + border
* boxsizing: contentbox;
Rendered width = content width
* boxsizing: borderbox;
RESOURCES
by Paul Irish
CSS Box Sizing by MDN(https://developer.mozilla.org/en/docs/Web/CSS/box‐sizing)Box sizing explained on CSS‐Tricks (https://css‐tricks.com/box‐sizing/)* Box‐sizing: Border‐box FTW (http://www.paulirish.com/2012/box‐sizing‐border‐box‐ftw/)
HOW TO DISPLAY?
CSS DISPLAY PROPERTIESnoneinlineblockinline‐blocklist‐iteminline‐list‐itemtableinline‐tabletable‐celltable‐columntable‐rowtable‐captionflexinline‐flex...
MOST POPULAR DISPLAY PROPERTIES
Left &rightmargins
Top &bottommargins
Set heightor width
Force linebreak after
vertical‐align
Inline Block Inline‐block
A SIMPLE GUIDE TO CSS POSITIONING
HAVE YOU EVER WANTED TO DO SOMETHINGLIKE...
BOX 1...but ended up like
BOX 1
BOX 2
BOX 2
POSITON: STATICDefault position property.Element laid out in its currentposition in the flow.z‐index property doesn't apply.
.box width: 200px; height: 200px; background: #14FFF4;
POSITON: RELATIVEAdjusts element position withoutchanging layout (leaves the spacefor the element where it shouldhave been when not beingpositoned).z‐index property applies.
.box2 position: relative; top: 40px; left: 40px;
POSITON: ABSOLUTEDoes not leave the space for theelement.Positions element at a specifiedposition relative to its closestrelative positioned ancestor or tothe containing block.z‐index property applies.
.box2 position: absolute; top: 0; left: 100px;
POSITON: FIXEDDoes not leave the space for theelement.Positions element at a specifiedposition relative to the viewport.z‐index property applies.
.box2 position: fixed; top: 0; left: 10px;
FLOAT
The float CSS property specifies that an element should be takenfrom the normal flow and placed along the left or right side of itscontainer, where text and inline elements will wrap around it.
‐‐ MDN (https://developer.mozilla.org/en/docs/Web/CSS/float)
HOW FLOATS WORK
CLEARING FLOATSUsing clear: both on containing div or in an empty div added afterfloating elements (old technique).Make a container of floating elements a new
:Float the element.Set the container overflow value other than visibleSet display to inline‐block, inline‐table, table‐cell or table‐caption.Set position to something other than static or relative
Block Formatting Context(https://www.w3.org/TR/css3‐box/#block‐level0)
...but every one of these solutions cause problems!
MICRO CLEARFIX
/* Contain floats *and margins*. */.cf:before,.cf:after content: ' '; display: table;.cf:after clear: both;
The float containment works the same way as the traditional“clearing” approach, but avoids the presentational markup by usingCSS generated content (:after)
‐‐ Understanding humble clearfix(http://fuseinteractive.ca/blog/understanding‐humble‐clearfix)
READ MORE
"hack" byNicolas Gallagher
Understanding humble clearfix(http://fuseinteractive.ca/blog/understanding‐humble‐clearfix)Micro clearfix (http://nicolasgallagher.com/micro‐clearfix‐hack/)
SIZING UNITS
CSS SIZING UNITSpxem%excmmminptpc
chremvhvwvminvmax
GOOD OL' PIXELS
Pixels have always been the faithful servant of designers. A pixelrepresents something finite, controllable, reliable. These valuesmake it uniquely suitable for communicating lengths indocumentation and providing unequivocal feedback to developers,“That padding needs to be 11px, it’s 10px at the minute”.
‐‐ Ben Frain (https://benfrain.com/just‐use‐pixels/)
USING PIXELSPROS
Editing code is morestraightforward (trying to be 'pixel‐perfect').No problems with compoundingissues (like with ems).
CONS
Some time ago there was a
onIE.
They're less flexible than ems/rems.
zoomissue(http://clagnut.com/blog/348/)
For responsive pages, px‐basedmedia queries change the pageexperience with zooming.(http://blog.cloudfour.com/the‐ems‐have‐it‐proportional‐media‐queries‐ftw/)
EMS AND COMPOUNDINGem is a relative unit based on parent font‐size.
If 1em = 16px then 1.5em = 24px
I'm grandpa
I'm dad
I'm son
.grandpa fontsize: 1.5em;
.dad fontsize: 1.5em;
.son fontsize: 1.5em;
REMS
In the case of rem units, however, the font‐size is dependent on thevalue of the root element (or the html element).
‐‐ CSS‐Tricks Almanac (https://css‐tricks.com/almanac/properties/f/font‐size/)
SIZING FONTS USING REMS
<div class="outer"> <h1>Heading</h1> <p>I'm an outer section content.</p>
<div class="inner"> <h1>Inner heading</h1> <p>I'm an inner section content.</p> </div></div>
html fontsize: 16px;
.outer fontsize: 1.5rem; /* 1.5 * 16px = 24px */
.inner fontsize: 2rem; /* 2 * 16px = 32px */
RESOURCES
by Jonathan Snook
by Jeremy Church by Ben Frain
by RomanRudenko
Font size with rem (http://snook.ca/archives/html_and_css/font‐size‐with‐rem)Font size on CSS‐Tricks Almanac (https://css‐tricks.com/almanac/properties/f/font‐size/)Confused about rem and em? (https://j.eremy.net/confused‐about‐rem‐and‐em/)Just use pixels (https://benfrain.com/just‐use‐pixels/)There’s more to the CSS rem unit than font sizing (https://css‐tricks.com/theres‐more‐to‐the‐css‐rem‐unit‐than‐font‐sizing/)
RESPONSIVE WEB DESIGN
MAKE YOUR WEBSITE LOOK GREAT ON ALLDEVICES
source: johnpolacek.github.io(http://johnpolacek.github.io/scrolldeck.js/decks/responsive/)
VIEWPORT META TAG
A typical mobile‐optimized site contains something like thefollowing:
The width property controls the size of the viewport. It can be setto a specific number of pixels like width=600 or to the special valuedevice‐width value which is the width of the screen in CSS pixelsat a scale of 100%. (...)
The initial‐scale property controls the zoom level when thepage is first loaded.
‐‐
<meta name="viewport" content="width=devicewidth, initialscale=1">
MDN(https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag)
(https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag)
MEDIA QUERIESThey help us build stylesheets for different screen resolutions
Examples:
@media screen and (maxwidth: 768px) .class ...
@media screen and (minwidth: 60em) .class1 ...
@media screen and (orientation: landscape) and (webkitmindevicepixelratio: 2) .class2 ...
Using media queries (https://developer.mozilla.org/en‐US/docs/Web/CSS/Media_Queries/Using_media_queries)
MOBILE FIRSTWHY?
Mobile Web usage is increasing.Overloading mobile devices with too much information (it's a pain for users with lowbandwidth).Progressive enhancement(https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement)
HOW?
.mobilefirstcomponent display: none;
@media screen and (minwidth: 992px) .mobilefirstcomponent width: 50%;
@media screen and (minwidth: 1200px) .mobilefirstcomponent width: 100%;
QUESTIONS?
THANKS FOR LISTENING!
WANT MORE?
‐ check browser compatibility for CSSproperties you wanna use
‐ a game for learning flexbox
CSS for Developers (http://elijahmanor.com/talks/css‐for‐devs/#/)Can I use ... ? (http://caniuse.com/)
Flexboxfroggy (http://flexboxfroggy.com/)