A short presentation highlighting new-ish features of CSS. Geared towards experienced programmers/web developers who may not have known about recent additions to CSS capabilities and functionalities.
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
CSS Eye for the Programmer Guy
1. Dennis Slade
CSS Eye for the
Programmer Guy
The San Diego PHP Meetup
2. Who Am I?
❖ Dennis Slade Jr.
tennisbear@gmail.com
❖ 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
3. 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!?
4. 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)
5. What We Won’t Be Covering
❖ Bootstrap
❖ Less
❖ Sass
❖ Modernizr
❖ jQuery
❖ Advanced filter and transform effects
6. 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
7. 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)
10. 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)
13. 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)
14. 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/
16. 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).
17. 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/
19. 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
20. 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
21. 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...
22. My Contact Info
❖ Dennis Slade Jr.
❖ tennisbear@gmail.com
❖ dennissladejr@gmail.com
❖ @DennisSladeJr
❖ linkedin.com/in/dennissladejr