css | wd notes

text

2010/05/04 22:19 | 0 comments

CSS Form Frameworks

Some CSS frameworks for web forms quick start:

Formee - fits into any project as it has a structure built around percentage widths which adapts to the space available; 2 CSS files (structure, design)
RMSforms - switch between horizontal and vertical layout is simple
Formy - demo does not look well; I will not try this one

#css #framework

link

2010/03/19 18:04 | 0 comments

Overriding The Default Text Selection Color With CSS

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways.

#css

text

2009/12/28 16:12 | 0 comments

Tracking HTML5 and CSS3 support with Google Analytics and Modernizr

sserrano:

You may think that html5 and css3 is going to become widespread in something akin to a geologic time scale. The truth is that many html5 and css3 features have currently widespread support.

Below, there is an small snippet to track the browser support for these advanced features for your user base, using google analytics and modernizr.

Modernizr is a small footprint javascript library that let you test the support of html5 and css3 features. With the combination of modernizr and analytics custom vars, we can track which percent of our users support a particular html5 or css3 feature.

So suppose we want to know the user base support for: sessionstorage, localstorage, canvas, fonfaces and borderradius.

Our analytics tracking code would look like:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? 
"https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + 
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript" src="/media/js/modernizr-1.1.min.js"></script>
<script type="text/javascript">

try {
var pageTracker = _gat._getTracker("UA-YYYYY-X");

pageTracker._setCustomVar(1, "sessionstorage", Modernizr.sessionstorage , 2 );
pageTracker._setCustomVar(2, "localstorage", Modernizr.localstorage, 2 );
pageTracker._setCustomVar(3, "fontface", Modernizr.fontface, 2 );
pageTracker._setCustomVar(4, "canvas", Modernizr.canvas, 2 );
pageTracker._setCustomVar(5, "borderradius", Modernizr.borderradius, 2 );

pageTracker._trackPageview();

} catch(err) {}</script>
After you append this to your site html body the results are going to appear on analytics under “visitors > custom variables”

Using a similar snippet we found that at www.wegif.com more than 80% of our users support all these features. Cool right?

For more info about how all this works, continue reading at:

http://www.modernizr.com/

http://code.google.com/intl/en/apis/analytics/docs/tracking/gaTrackingCustomVariables.html

#css #html5

text

2009/12/20 16:32 | 0 comments

Solving CSS Problems With eCSStender JS library

Tired of browser specific CSS rules like -moz, -webkit, -o ? Try this small JS library.

Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009

#css

video

2009/11/01 22:51 | 0 comments

Typotheque Web Font Service demo on Vimeo (via Vimeo)

#css

link

2009/10/24 17:14 | 0 comments

CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

#css

link

2009/10/19 22:05 | 0 comments

CSS Frameworks summary + pros & cons

What is a CSS frameworks? What are the advantages and the disadvantages of this approach?

#css #framework #webdesign

wd notes

Posts tagged css