Tags
- CSS (11)
- Design (9)
- HTML (7)
- Inspiration (6)
- Links Roundup (6)
- Typography (6)
- illustration (6)
- Creativeness (5)
- Development (5)
- Javascript (4)
- View all 77 tags
- Links (3)
- Mobile (3)
- Tutorial (3)
- Markup (2)
- Minimalist (2)
- Tips (2)
- Vintage (2)
- Xcode (2)
- Xmas (2)
- jQuery (2)
- photoshop (2)
- progressive enrichment (2)
- retro (2)
- Badge (1)
- Bookmarklet (1)
- Cards (1)
- Christmas (1)
- DOM (1)
- Date (1)
- Drop Caps (1)
- Illustrator (1)
- Link (1)
- PHP (1)
- Pizza by the slice (1)
- Redesign (1)
- Roy Doty (1)
- Twitter (1)
- UI (1)
- UX (1)
- Vector (1)
- Wordpress (1)
- accessibility (1)
- adjacent sibling selector (1)
- animation (1)
- barack (1)
- bug (1)
- clearfix (1)
- collage (1)
- color (1)
- css 3 (1)
- easy-clearing (1)
- election (1)
- form (1)
- freebies (1)
- gogobot (1)
- group (1)
- halloween (1)
- iPhone (1)
- ie7 (1)
- image editor (1)
- ios (1)
- job (1)
- label (1)
- obama (1)
- oneyear (1)
- portfolio (1)
- progressive enhancement (1)
- pumpkin (1)
- rgba (1)
- roundup (1)
- scroll (1)
- spooky (1)
- steampunk (1)
- tools (1)
- tooltip (1)
- webkit (1)
- yes we can (1)
Archive
Adding hasJS Class When JavaScript Is Available
While at An Event Apart Boston, Jeremy Keith delivered the best lecture of the conference, about progressive enhancement. One slide caught my attention the most. It was about adding a class to the body if JavaScript was available. Here is his code example using jQuery:
Keith's Example using jQuery:
CSS
Why add a class if JavaScript is enabled?
Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.
Renaming and Extending Easy-Clearing, AKA Clearfix
When positioniseverything.net posted an article about clearfix technique, it didn't take much for web developers and designers to start adopting it. Lately, Dan Cederholm has been talking about renaming the class clearfix to group, which semantically speaking makes a lot more sense. So, let's go ahead and rename the class.
New Easy-Clearing
Using conditional comments, let's add the proper code to handle IE 6 and IE 7 (IE8 supports the :after pseudo-elements; no extra code is necessary).
The Right Way to Declare RGBa Colors
One of the best progressive enrichment that I use on my projects is to set colors as RGBa (red, green, blue, alpha) values. As I write this, RGBa is current supported in firefox 3.0.5+, Safari 2+, Chrome 1+, and Opera 10+.
The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:
CSS
I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.
