css eye for the programmer guy
TRANSCRIPT
Dennis Slade
CSS Eye for the
Programmer GuyThe San Diego PHP Meetup
Who Am I?
❖ Dennis Slade Jr.
❖ 20+ years experience
implementing and supporting
critical web and desktop
business systems
❖ 12+ years hands-on experience
with *AMP web development
projects (PHP on Linux & OS X)
❖ 14+ years experience in
software support and training
Why This Presentation?
I recently ran across this Google I/O presentation from a few years
back. The presentation made me realize that I wasn’t yet leveraging
CSS3 and HTML5 functionalities which are now in widespread usage,
and which could save me time and headaches in my coding projects.
I refreshed my knowledge in these areas and I thought you might like
to as well.
❖ See: Google I/O 2012 - The Web Can Do That!?
What We’ll Be Covering
❖ Better forms with CSS styling and HTML5
validation
❖ Semantic tags to improve page
organization, SEO, and accessibility
❖ Introductory regions and flexbox
❖ Basic fancy effects (No JavaScript
required)
What We Won’t Be Covering
❖ Bootstrap
❖ Less
❖ Sass
❖ Modernizr
❖ jQuery
❖ Advanced filter and transform effects
Before We Begin
❖ Checking which browsers support which CSS3/HTML5
features: caniuse.com
❖ CSS Lint for analyzing problems: csslint.net
❖ CodePen for trying stuff out: codepen.io
CSS Organization Basics
❖ Use classes rather than element ids whenever possible.
❖ Use style attributes only as a last resort.
❖ Include files rather than inline except when CSS is needed in
emails.
❖ Use <link> tags instead of @import because of performance
issues.
❖ Here’s much, much more on organizing your CSS:
engineering.appfolio.com/2012/11/16/css-architecture/ (thanks for
the link @step_hane)
Forms: CSS styling, HTML5 validation
For Forms You Can Style Anything
❖ Selectors can be applied by input type:
❖ .dashboard-edit-form input[type="text"] { margin-top:4px; }
.dashboard-edit-form input[type="url"].uri { width:85%; }
.dashboard-edit-form input[type="text"].name { width:80%; }
.dashboard-edit-form input[type="file"].upload
{
margin-left:0.5em; margin-top:7px; margin-bottom:16px;
}
❖ .dashboard-edit-form input[type="text"].location { width:60%; }
.dashboard-edit-form select.status { float:left; margin-top:16px; }
.dashboard-edit-form textarea.description,
.dashboard-edit-form textarea.notes
{
width:75%; height:200px; margin-top:7px;
}
.dashboard-edit-form textarea.notes { height:60px; }
.detail-form input[type=“checkbox"].search { margin:9px; }
.detail-form input[type=“email"].search { margin:inherit; }
Input Validation
❖ It’s not just text anymore. Try:date, time, email, url, number, tel, range
❖ Validation with min, max, step, pattern
❖ Required for form fields is lovely… except in mobile and
desktop Safari
❖ Don’t forget <label> for form field navigation and screen
reader accessibility. (example in CodePen)
Poor Man’s Responsive Forms
body { font-size:14pt; }
section { font-size:0.9em; }
.sign-up-main-content,
.sign-up-information
{
font-size:0.8em;
}
.sign-up-complete { padding:0% 10%; }
.sign-up-complete .buttons
{
margin:80px 0px 0px 0px;
}
.talent-network-join { width:640px; }
.talent-network-join .buttons
{
padding:5px;
}
.copyright-only { display:none; }
.standard-links { display:block; }
@media screen and (max-device-width: 960px)
{
body { font-size:36pt; }
.sign-up-complete { padding:0; }
.sign-up-complete .buttons
{
margin-left:5px;
}
.talent-network-join { width:94%; }
.talent-network-join .buttons
{
padding:0;
}
.copyright-only { display:block; }
.standard-links { display:none; }
}
Semantic Tags for SEO & Accessibility
Use Semantic Tags
❖ Your pages can use HTML5 semantic tags like:
❖ <section>
❖ <header>, <footer>
❖ <nav>, <aside>, <article>
❖ Use older HTML tags like <p>, <div>, <ul> within
the semantic tag blocks (example in CodePen)
Use Semantic Tags
❖ Improves overall SEO of public pages since search engine crawlers
can easily discern the important content on the page.
❖ See: searchengineland.com/2014-seo-roadmap-semantic-markup-
177798
❖ Much better for accessibility than the original div/p paradigm. Screen
readers in particular use semantic tags to facilitate the browsing
experience for the visually impaired
❖ See: clarissapeterson.com/2012/11/html5-accessibility/
Poking the (flex)Box
What Is Flexbox?
❖ The Flexbox Layout (Flexible Box or just Flexbox) module
aims at providing a more efficient way to lay out, align and
distribute space among items in a container, even when
their size is unknown and/or dynamic.
❖ Flexbox is intended to replace floats and the Box model
which we’ve had to deal with for far too long.
❖ There is fairly widespread support for Flexbox. IE has
recently adopted it (previously the Grid Layout model was
the only alternative to the Box model).
Flexbox Features
❖ Align block elements within other blocks with easy
spacing and justification.
❖ Block elements height and width can be easily
synchronized.
❖ The order of elements can be changed via CSS without
calls to the Apache/backend server or JavaScript.
❖ See css-tricks.com/snippets/css/a-guide-to-flexbox/
Basic Fancy Effects
(No JavaScript Required)
Regions, Transforms & Animation
❖ Transforms
❖ Mozilla: CSS Transforms doc
❖ Mozilla: Using CSS transforms
❖ Animation
❖ Mozilla: Using CSS animations with nice live examples
❖ Transforms with Regions
❖ A flippable book using CSS Regions and 3D transforms
Links, Etc.
❖ Video: Google I/O 2012 - The Web Can Do That!?
❖ Video: Create a Responsive Website Using HTML5 and
CSS3
❖ A Complete Guide to Flexbox
❖ W3C: Advanced CSS selectors
❖ As mentioned before: caniuse.com
Notes
❖ CSS variables aren’t yet widely adopted. When they are, they
might look something like this.
❖ I used to love using the text-to-speech attribute in WebKit. But
sadly that’s deprecated now for security reasons. *sniffle*
❖ This presentation was originally titled “CSS Eye for the PHP Guy”
but I changed it to “Programmer Guy” after I realized there was no
actual PHP code in the presentation.
❖ Photo credits: (c) 2014 by Me, all from from my recent honeymoon
in Italy. And yes, the Leaning Tower pic in the next slide is totally
real, no photo editing at all...
My Contact Info
❖ Dennis Slade Jr.
❖ @DennisSladeJr
❖ linkedin.com/in/dennissladejr