css eye for the programmer guy
TRANSCRIPT
![Page 1: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/1.jpg)
Dennis Slade
CSS Eye for the
Programmer GuyThe San Diego PHP Meetup
![Page 2: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/2.jpg)
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
![Page 3: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/3.jpg)
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!?
![Page 4: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/4.jpg)
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)
![Page 5: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/5.jpg)
What We Won’t Be Covering
❖ Bootstrap
❖ Less
❖ Sass
❖ Modernizr
❖ jQuery
❖ Advanced filter and transform effects
![Page 6: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/6.jpg)
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
![Page 7: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/7.jpg)
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)
![Page 8: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/8.jpg)
Forms: CSS styling, HTML5 validation
![Page 9: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/9.jpg)
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; }
![Page 10: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/10.jpg)
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)
![Page 11: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/11.jpg)
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; }
}
![Page 12: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/12.jpg)
Semantic Tags for SEO & Accessibility
![Page 13: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/13.jpg)
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)
![Page 14: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/14.jpg)
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/
![Page 15: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/15.jpg)
Poking the (flex)Box
![Page 16: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/16.jpg)
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).
![Page 17: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/17.jpg)
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/
![Page 18: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/18.jpg)
Basic Fancy Effects
(No JavaScript Required)
![Page 19: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/19.jpg)
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
![Page 20: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/20.jpg)
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
![Page 21: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/21.jpg)
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...
![Page 22: CSS Eye for the Programmer Guy](https://reader033.vdocuments.net/reader033/viewer/2022052911/559f10d71a28ab664d8b46b2/html5/thumbnails/22.jpg)
My Contact Info
❖ Dennis Slade Jr.
❖ @DennisSladeJr
❖ linkedin.com/in/dennissladejr