SCSS — a new icing from Sass

SCSS — a new icing from SassAs I lately did almost no CSS/HTML jobs, I've missed the Sass3 release that implemented the SCSS extension (Sassy CSS). That's a CSS extension without any syntax «distortion», meaning that any valid CSS document is a valid SCSS document too. In this article, I'll compare that release with some existing preprocessors, such as Sass and Less. Please note that the Sass syntax has been updated recently.

( Read more )

Cross-browser box-shadow

Cross-browser box-shadow

Hi, dear readers!

Today I'd like to share with you an extremely simple cross-browser implementation of the CSS property «box-shadow». The method is so simple and obvious that I was greatly surprised not to find a similar solution anywhere on the Web (though I'm absolutely positive that I'm not the first one to discover it).

( Read more )

Getting a CSS rule's line number in Safari / WebKit / Chrome Web Inspector

WebKit-based browsers have an excellent built-in tool for webpage debugging, Web Inspector. Basically, it's an analog of Firebug, with its own strengths and weaknesses. I've been using Web Inspector more and more lately, though one drawback bothered me a lot: It doesn't show line numbers of the CSS rules.

( Read more )

Improving text-align: justify

They say that only amateurs justify text, and the reason is simple: huge gaps between words. Even if hyphenation is used, the result is still far from perfect:

( Read more )

CSS Mess

.

( Read more )

To Copy or Not to Copy: The content CSS Property



I've decided to use a trendy CSS property, content, for my web project, to make webpages more "lightweight" and to improve the flexibility of tuning their appearance. As the project was only intended for web developers, I didn't need to bother about supporting outdated browsers (IE 6 and 7). Alas, I was greatly disillusioned in that CSS property: though everything was displayed correctly, the end user's experience was far from perfect.

( Read more )

Columnar Layout



There are many methods of making columnar layout. More than one web developer's nose was blooded (fortunately, only virtually) in the holy wars over the superiority of one or the other technique. It should seem that everything is as clear as possible by now, but plenty of difficulties still arise here and there. I'd like to make my contribution to the common good, so I've spent some time on experiments that allowed me to create one more method, which has the following advantages and disadvantages:

( Read more )

Layout of Stretchy Websites



In this article I will share with you a technique for laying out stretchy websites (actually, I have found out that I cannot make non-stretchy ones), which I've been using for the last 2-3 years. This technique, which can be used for creating sophisticated modular grids, is easy to use but somewhat difficult to understand, and it does have some drawbacks. Basically, this article might be useful for web designers too, as website layout should be correctly designed before actual coding is done.

( Read more )

Layout of repeating blocks

When making layout for a website, it often happens so that I need to use blocks of equal width but of different height, placed in a container of variable width.

Moreover, a filter may be applied to the "list" of blocks, showing or hiding list elements via JavaScript, and the filter should neither destroy the "rows" and the layout, nor leave holes in the layout, so table-based solutions cannot be used. Here's a very simple example — a goods catalog:



( Read more )

Zen coding



Make HTML/CSS faster with Zen coding

( Read more )