PUBLIC MARKS from greut with tag css

Taking a “mobile first” approach to web development poses some challenges if you need to provide a “desktop” experience for legacy versions of IE. Using a CSS pre-processor like Sass can help.

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.

What do we do for browsers that don't support rem units? We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

The biggest calling point for zen-coding for me is its implementation of HTML selectors as snippet triggers. zen-coding includes an entirely new angle to writing markup, and it facilitates the feature by letting you write HTML based on CSS selectors

Exists for a wide range of editors, if you like snippets.

premailer.py takes a HTML page, finds all CSS blocks and transforms these into style attributes.

a must have nowadays!

a set of reusable font stacks per family

CSSJanus is CSS parser utility designed to aid the conversion of a website's layout from left-to-right (LTR) to right-to-left (RTL). The script was born out of a need to convert CSS for RTL languages when tables are not being used for layout (since tables will automatically reorder TD's in RTL). CSSJanus will change most of the obvious CSS property names and their values as well as some not-so-obvious ones (cursor, background-position %, etc...).

This document provides advice for the use of XHTML or HTML markup and CSS to create pages for languages that use right-to-left scripts, such as Arabic and Hebrew. It attempts to counter many of the misunderstandings or over-complexities that currently abound. It also offers advice to those preparing content that will be localized into scripts that behave like Arabic and Hebrew.

SmartSprites is a tool that will let you easily introduce and maintain CSS sprites in your designs. SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties to your style sheet, so that the sprites are used instead of the individual images.

sprites for the lazy

This series of layouts use pixel and em widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page.

liquid layout for the win!

Since the release of CSS Level 2 Recommendation ten years ago in may 1998, the Web authors' community has been requesting a way of defining variables in CSS. Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations. If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair.

w00t!

Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.

always useful tips and hacks.

How z-index works! This page is to demonstrate how elements stack.

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 used to shift the visible area to the required component image.

another way to save precious HTTP hits from your page

CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it's cleaner and more powerful than CSS2 is.

Maybe nice with a dev website, then a minimization before pushing on prod.