public marks

PUBLIC MARKS from greut with tag css



“Mobile first” CSS and getting Sass to help with legacy IE

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 The CSS Markup Detective

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

Font sizing with rem

by 4 others

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 */


CSS for Widgets: friends don't break friends' styles

Interesting view on how much each selector is worth


The Art of zen-coding: Bringing Snippets to a New Level - Monday By Noon

by 1 other

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. - Transform CSS into line style attributes with lxml.html - (Peter Bengtsson on Python, Zope, Kung Fu, London and photos)

by 1 other takes a HTML page, finds all CSS blocks and transforms these into style attributes.

a must have nowadays!

8 Font Stacks - CSS - Snipplr

a set of reusable font stacks per family


Google Open Source Blog: CSSJanus: Helping i18n and LTR to RTL


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...).

Internationalization Best Practices: Handling Right-to-left Scripts in XHTML and HTML Content

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: CSS Sprite Generator Done Right

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

Ultimate multi-column liquid layouts (em and pixel widths)

by 4 others

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!

CSS Variables

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.


CSS Mojo: Adding Polish To Your Pages

by 1 other
<blockquote><p>Often times, as web developers, we're asked to add some seemingly simple visual elements to a page, like rounded corners and drop-shadows. There's as many methods of doing these as there are engineers who've banged their collective heads against the issue. In this presentation I'll provide you my markup-lite, non-javascript, mostly semantic methods for adding some fit & finish to your pages. This is by no means the end-all, be-all of rounded corners, and I'd encourage you to do some experimentation to find quicker and more elegant ways of doing some of the following.</p></blockquote> <p>some nice tricks, remember, keep it light.</p>

10 best CSS hacks |

by 9 others

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.


Understanding z-index

by 2 others

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

What are CSS sprites?

by 17 others

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


by 6 others

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.

css-redundancy-checker - Google Code

by 1 other (via)
A simple script that, given a CSS stylesheet and either a .txt file listing URLs of HTML files, or a directory of HTML files, will iterate over them all and list the CSS statements in the stylesheet which are never called in the HTML.

dojo.query: A CSS Query Engine For Dojo | The Dojo Toolkit

by 2 others
it looks pretty fast regarding YUI or jQuery.

greut's TAGS related to tag css

art +   book +   code +   color +   community +   content +   css3 +   debug +   demonstration +   design +   dev +   dojo +   example +   float +   fonts +   framework +   geek +   google +   grid +   guide +   hacks +   handheld +   html +   html5 +   http +   i18n +   ie +   iphone +   js +   markup +   mobile +   msie +   opensource +   opera +   performance +   presentation +   python +   reset +   Responsive +   rules +   safari +   sass +   snippets +   sprite +   ssr +   tips +   tool +   tools +   trips +   typography +   UED +   usability +   use +   web +   webdev +   widget +   widgets +   work +   www +   xhtml +   yahoo +   z-index +