Code-Is-Art » CSS

Округлые уголки, CSS

Octane — Thu, 09 Apr 2009 13:03:48 +0000

В этой статье мы рассмотрим пример создания панелей веб-сайта с округлыми углами на заранее известном сплошном цвете фона, при этом панели будут как угодно изменять свои размеры.

I. Начнем работу с Adobe Photoshop:

Создадим новое изображение (Ctrl+N) небольшого размера, например: 300х200 пикселей, на белом фоне;
Воспользуемся инструментом Rounded Rectangle Tool (U). Поставим радиус округления углов Radius равным 10 пикселей, и управление размерностью добавляемого объекта Round Rectangle Options — Unconstrained

Выберем какой-нибудь цвет для панели, например: #74c44c
Используем данный инструмент на нашем холсте, затем нажмем правой кнопкой мыши в панели Слои (Layers) по названию появившегося слоя Shape 1 и выберем пункт Resterize Layer. В итоге должно получиться что-то похожее на изображение ниже:
Увеличим масштаб изображения до максимального (Ctrl++) и используя инструмент Crop Tool (C) выделим левый верхний угол нашей фигуры (Rounded Rectangle) как показано на рисунке

Т.е. захватим только область где идет скругление углов, все что залито сплошным не попадет в зону выреза. Далее нажмем правой кнопкой мыши внутри выделенного прямоугольника и выберем пункт Crop, получим:
Сохраним полученное изображение в файл, для этого нажмем Ctrl+Shift+Alt+S или выберем пункт Save for Web (Сохранить для Веб) в меню File (Файл). В появившемся окне проделаем следующие настройки:
1. GIF — формат в который будем сохранять изображение;
2. Adaptive — режим коррекции цветом, в нашем случае является наилучшим;
3. Параметры уменьшающие качество и четкость изображения (Dieter, Lossy, Web Snap) выключаем и ставим на минимум;
4. Убираем галочку напротив Transparency (Прозрачность);
5. Выберем количество цветов Colors так чтобы не было потери качества;
6. Параметр Matte устанавливаем в значение none
7. Далее нажимаем кнопку Save (Сохранить) и сохраняем изображение, например под именем: panel_top_left.gif
Проделаем пункты 3-4 с тремя оставшимися углами, в итоге получим набор изображений:
1. panel_top_left.gif — левый верхний угол;
2. panel_top_right.gif — правый верхний угол;
3. panel_bottom_left.gif — левый нижний угол;
4. panel_bottom_right.gif — правый нижний угол.

На этом работа с Adobe Photoshop закончена.

II. Далее действия могут производится в любом текстовом редакторе, например Notepad (Блокнот). Рекомендуем воспользоваться специализированным решением, например Adobe Dreamweaver, ActiveState Komodo Edit, PSPad и др.

Создадим html — документ (далее планируется что, читатель данной статьи обладает начальными знаниями HTML и CSS);
Добавим 4 вложенных друг в друга тега
```
Hello World !
```
Опишем для первого тега
класс и назовем его panel:
```
.panel { background: #74c44c url(panel_top_left.gif) top left no-repeat; }
```
Цвет фона следует задать только у первого (родителького) тега
;
Далее относительно родительского тега
опишем стили для всех вложенных тегов
:
```
.panel div {
	background: url(panel_top_right.gif) top right no-repeat;
}
.panel div div {
	background: url(panel_bottom_left.gif) bottom left no-repeat;
}
.panel div div div {
	background: url(panel_bottom_right.gif) bottom right no-repeat;
}
```
Т.е. для каждого тега
задаем в виде неповторяющегося фона ранее созданные изображения. Для первого тега
фоном будет изображение panel_top_left.gif, которое с помощью комбинации параметров top left свойства background разместим в верхнем левом углу. Изображение panel_top_right.gif, являющееся фоном первого вложенного тега
в тег
с классом panel с помощью комбинации параметров top right свойства background разместим в верхнем правом углу и т.д.
Опишем отступ текста от краев панели и применим некоторое оформление к тексту, который будет содержаться внутри панели:
```
.panel div div div {
	background: url(panel_bottom_right.gif) bottom right no-repeat;
	padding: 15px;
	color: #fff;
	text-align: center;
}
```

Соберем теперь все это в один документ:





Округлые уголки (CSS: Урок № 1)



	
		
			
				Hello World !

и получим результат:

Hello World !

Наша панель может изменять свои размеры, как в высоту, так и в ширину, при этом качество округления уголков не теряется

Создавайте сайты так,
чтобы они радовали глаз!

Заключение: данный способ позволяет создать эффект округления уголков контейнеров, находящихся на заранее известном сплошном цвете фона (в нашем случае белый), как создать такой эффект в случае градиентного или текстурированного фона, рассмотрим в следующей статье.
Так же стоит отметить, что при наличии большого количества разноцветных панелей, сделанных таким способом, получается большое количество запросов на сервер, например, у нас есть 5 цветов панелей, по 4 файла на каждую, уже получается 20 изображений, в этом случае такой способ не рекомендуется использовать. О том как уменьшить количество запросов изображений на сервер, а так же почему лучше использовать фоновые изображения рассмотрим отдельно в ближайших статьях.

P.S.: Когда Все браузеры будут поддерживать CSS3, такой пример можно будет осуществить по средством одного тега

и одного CSS-класса к нему, т.к. будет существовать возможность задать сразу несколько фоновых рисунков для одного элемента.

Статья перенесена из нашего корпоративного блога ввиду полной переделки сайта. Подробнее можно узнать тут.

Компания Web++ — создание сайтов Волгоград.

CSS-селекторы в js-core

Octane — Mon, 12 Jan 2009 13:10:48 +0000

Встроенной поддержки механизма выборки элементов с использованием CSS-селекторов нет, но легко внедрить один из существующих.

Возьмем готовые решения Sizzle, Peppy и Yass, и сделаем расширение для js-core, которое будет автоматически преобразовывать список элементов, выдаваемый этими движками, в объект для работы со списками узлов, предусмотренный в framework’е.

Sizzle

core.query = function(selector, context) {
    return new core.list(Sizzle(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(Sizzle(selector, this.node), false);
};

Peppy

core.query = function(selector, context) {
    return new core.list(peppy.query(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(peppy.query(selector, this.node), false);
};

Yass

core.query = function(selector, context) {
    return new core.list(yass(selector, context), false);
};
core.prototype.query = function(selector) {
    return new core.list(yass(selector, this.node), false);
};

Добавьте одно из этих расширений сразу после загрузки js-core и соответствующего движка выборки элементов по CSS-селекторам.

Рассмотрим, как это можно использовать. Возьмем следующий XHTML-код:


    First list item
    Second list item
    Third list item
    Fourth list item
    Fifth list item
    Sixth list item
    Seventh list item
    Eighth list item

Опишем CSS-класс:

.odd {
    background: #ffc;
}

Теперь, с помощью JavaScript, добавим класс odd всем нечетным элементам списка list:

$.query('#list > li:nth-child(odd)').each('addClass', 'odd');

// или
$('list').query('li:nth-child(odd)').each('addClass', 'odd');

Получим так называемую «зебру» из элементов списка:


    First list item
    Second list item
    Third list item
    Fourth list item
    Fifth list item
    Sixth list item
    Seventh list item
    Eighth list item

В функции $.query(…) вторым параметром можно указать контекст поиска. Это бывает удобно, например, при поиске элементов ввода внутри форм или нахождении элементов в XML-данных, пришедших с сервера через AJAX.

// найти все чекбоксы в первой форме документа
$.query('input[type="checkbox"]', document.forms[0]);

В методе $('id'|node).query('selector'), в качестве контекста поиска, автоматически передается текущий элемент.

Скачать: пример, js-core.

В рамках акции «Обмен постовыми»:

Записки микростокового иллюстратора — блог о том, как еще можно заработать в сети.

Использование CSS подмены текста изображением и SEO. Какие могут быть последствия?

Skaizer — Tue, 16 Dec 2008 22:36:20 +0000

Подмена текста на сайте изображением — распространенная техника среди верстальщиков. С помощью CSS вы можете спрятать текст вне поля видимости страницы на мониторе, а на его месте расположить какую-либо картинку.

Для чего это нужно и как отнесутся к этому поисковые системы?

Давайте приведем пример. Допустим, у нас на сайте имеется логотип в виде картинки. Следующий код реализует это:

Давайте применим технику CSS-подмены. Создадим CSS-класс logo:

h1.logo {
width: 300px; height: 50px;
background: url(images/logo.jpg);
text-indent: -9999px;
}

Остается немного изменить наш код логотипа:

Название логотипа или компании

Визуально вы не найдете разницы. И в первом и во втором случае вы увидите изображение логотипа, и никакого текста.

Но давайте взглянем на это со стороны SEO. Известно, что для выделение наиболее важных ключевых слов на сайте (как правило, по которым происходит продвижение) их помещают в теги заголовков

…
и логического выделения, в основном , .

Во втором случае, когда применяется CSS-подмена текста изображением, сам текст присутствует в теге
. И поисковая система, когда будет разбирать структуру сайта, выделит этот текст, как более приоритетный на странице и придаст ему дополнительный вес.

Рождается вопрос, а не противоречит ли это правилам поисковых систем. То есть фактически, мы предоставляем пользователю и поисковой системе различающуюся информацию.

За и против

Итак, давайте поглубже вникнем в суть этого метода с точки зрения SEO. Почему оптимизаторы начинают использовать эту технику?

Никто не мешает заменять изображениями большие блоки текста, насыщенные ключевыми словами. Ведь пользователю эти блоки не будут видны, а поисковая система «проглотит» их и будет использовать в ранжировании. Этим SEO-специалисты и пользуются.

Но может ли данная техника повлечь бан всего сайта или наложения какого-либо фильтра?

По словам Google?

Мэтт Катс, глава отдела по борьбе с поисковым спамом в Google, однажды сказал:

Использование CSS-подмены текста изображение является допустимой техникой. И Google не будет штрафовать сайт за ее использование, при условии, что соблюдены правила: текст на картинке должен полностью соответствовать заменяемому тексту. Например, если ваша компания называется «Expo Markers», что и изображено на логотипе, и скрытый текст тоже «Expo Markers», то вы можете не беспокоиться. Никакого нарушения правил здесь нет. Но если скрытый текст: «Expo Markers cheap online discount buy online Expo Markers sale …», то есть повод для беспокойства, потому как Google может оштрафовать сайт, или что еще хуже — забанить.

Итак, стало ясно, что если CSS-подмена текста изображением применяется не для поискового спама, то причин для беспокойства нет.

Используете ли вы подобный метод подмены и были ли у вас проблемы с поисковиками по этому поводу?

Все, что вы знали о CSS — неправда

Skaizer — Sun, 16 Nov 2008 11:00:17 +0000

После релиза, IE8 будет поддерживать множество новых параметров для аттрибута дисплея CSS, включая параметры, относящиеся к таблицам: table, table-row и table-cell — и это последний крупный браузер с их поддержкой. Это событие обозначит конец сложных методов CSS разметки и забьет последний гвоздь в гроб использования HTML таблиц для верстки. В итоге, создание сеток разметки табличного вида будет быстрее и проще.

Применение параметров табличных аттрибутов к элементам веб-страницы заставляет элементы подражать свойствам изображения с помощью их табличных эквивалентов. В этой статье я покажу каким образом это будет оказывать большое влияние на способы использования CSS для разметки веб-страниц.

CSS таблицы решают все проблемы, появляющиеся при использовании абсолютной системы коодинат или флоатов, для создания многострочной разметки в современных браузерах. Задание параметра table для аттрибута display позволит вам отобразить элементы так, как будто они являются элементами таблицы. Главное преимущество табличной разметки CSS — это возможность легкого определения границ клетки, позволяющее нам добавить к ней фон и прочее без семантических проблем выделения нетабличных элементов, как в HTML таблице документа.

⋮ HTML head content… ⋮ navigation column content… ⋮ news headlines column content… ⋮ main article content…

HTML код определяет нужный порядок вывода данных. Первой идет столбец nav, затем extras, последним идет content.

Также нам необходимо написать требуемый CSS код:

#main { display: table; border-collapse: collapse; } #nav { display: table-cell; width: 180px; background-color: #e7dbcd; } #extras { display: table-cell; width: 180px; padding-left: 10px; border-right: 1px dotted #d7ad7b; } #content { display: table-cell; width: 380px; padding-left: 10px; }

Только что созданная нами табличная разметка будет корректно отображаться как в IE8, так и в Firefox, Safari и Opera.

Мы получили разметку из трех столбцов равной высоты без применения особых приемов, таких как ложных столбцов с помощью фоновых рисунков, проблем с размещением или необходимости очищать floats!

Как это работает?

Аттрибут display позволяет вам задать ряд табличных параметров, чтобы отображать элементы так, как будто они являются элементами таблицы. Вот доступные параметры отображения:

table заставляет элемент вести себя, как элемент таблицы;

table-row заставляет элемент вести себя, как элемент строки таблицы;

table-cell заставляет элемент вести себя, как элемент ячейки таблицы;

table-row-group заставляет элемент вести себя, как элемент группы строк таблицы;

table-header-group заставляет элемент вести себя, как элемент группы заголовков таблицы;

table-footer-group заставляет элемент вести себя, как элемент группы нижнего колонтитула;

table-caption заставляет элемент вести себя, как элемент заголовка таблицы;

table-column заставляет элемент вести себя, как элемент столбца таблицы;

table-column-group заставляет элемент вести себя, как элемент группы столбцов таблицы.

Подождите, разве разметка таблицами — это правильно?

Допустим, что вы не совсем согласны с примером, который мы только что привели — в конце концов, разве зашитники веб стандартов не настаивали годами на том, что вы не должны использовать таблицы для разметки?

HTML элемент table — это семантическая структура: он описывает, что из себя представляют данные. Поэтому, вам нужно использовать table, только если данные, которые вы размещаете — табличные, например, финансовая информация. Она обычно размещается на компьютере электронной таблицей, поэтому наверное следует определять её как таблицу в HTML.

С другой стороны, параметр table аттрибута display, просто показывает как что-то должно выглядеть в браузере и не имеет семантического значения!

Использование элемента table для вашей разметки говорит агенту пользователя: «Это табличные данные». А применение связки div-ов просит его отборазить их визуально определенным образом, если это возможно.

Конечно же, нам не следует использовать display: table; в связке элементов div, когда мы имеем действительно табличные данные. Наш простой пример, описанный выше, заставляет нашу разметку выглядеть так, как будто у нас есть однострочная таблица с тремя ячейками, не требуется большое воображение, чтобы осознать потенциал этой техники для легкого создания комплексных видов разметок.

Анонимные элементы таблиц

Таблицы CSS придерживаются обычных правил табличной разметки, которые открывают очень мощное свойство табличных разметок CSS: пропущенные элементы таблиц создаются анонимно самим браузером. Спецификация CSS 2.1 утверждает:

Отличные от HTML документальные языки могут не содержать всех элементов модели таблицы CSS 2.1. В этих случаях «пропущенные» элементы дожны быть созданы, чтобы табличная модель заработала. Любой элемент таблицы автоматически сгенерирует вокруг себя необходимые анонимные объекты таблицы, состоящие по крайней мере из трех вложенных объектов, соответсвующих элментам «table»/«inline-table», «table-row», и «table-cell».

Это значит, что если мы используем display: table-cell; без предварительного размещения ячейки в месте, относящемся к display: table-row;, то строка будет подразумеваться — браузер будет вести себя так, как будто объявленная строка на самом деле есть.

Давайте используем простой пример, чтобы объяснить этот прием: разметку из трех ячеек, показанную ниже. Мы рассмотрим три разных примера HTML кода, которые приведут к одинаковой визуальной разметке.

Сначала пример кода, который может быть использован для создания разметки из трех ячеек:

CELL A CELL B CELL C

Набор вложенных элементов div не выглядит как-то особенно, но скоро мы это изменим. CSS тоже очень простой:

.container { display: table; } .row { display: table-row; } .cell { display: table-cell; width: 100px; height: 100px; border: 1px solid blue; padding: 1em; }

Этот CSS относит элемент с классом «container» к display: table;, элемент с классом «row» к display: table-row;, а элемент с классом «cell» — к display: table-cell; с заданием его границы, высоты и ширины.

Вышеописанная HTML разметка явно создает элементы для таблицы из строки с тремя ячейками, используя все CSS классы, созданные нами. Однако, мы можем уменьшить код, убирая строковые элементы div вот так:

CELL A CELL B CELL C

Несмотря на то, что в этой разметке пропущен элемент, представляющий таблицу, она будет создана браузером, как анонимный элемент. Мы можем ещё сильнее сократить код:

CELL A CELL B CELL C

В такой разметке пропущены элементы, описывающие таблицу и её строку, они оба создаются браузером, как анонимные элементы. Даже при пропуске элементов в разметке, конечный результат одинаков.

Правила создания анонимных элементов таблицы

Эти анонимные элементы создаются не магией, и они не будут автоматически появляться для любого недостатка вашего HTML кода. Чтобы полностью использовать преимущества анонимных элементов таблицы, желательно ознакомиться с правилами их создания. Если разметка запрашивает предполагаемый элемент, браузер создает анонимную ячейку и записывает ее CSS аттрибуту display одно из значений table, table-row, или table-cell, в зависимости от контекста.

Если у вас есть элемент, определенный, как display: table-cell;, но его непосредственный предок (элемент, содержащий его), не определен, как table-row, будет создан анонимный элемент table-row, чтобы включить в него ячейку и любые последующие родственные элементы, которые также определены table-cell, до тех пор, пока не попадется элемент, не относящийся к table-cell, таким образом они будут помещены в одну и ту же строку. Например, следующая разметка:

CELL A CELL B CELL C Not a cell

Верхние три элемента div, имеющие класс «cell», определяются в display: table-cell; и будут отображены друг за другом, как если бы они были в однострочной таблице, а последний элемент div не будет включен в ряд, поскольку он не относится к display: table-cell;.

Если элемент относится к display: table-row;, в то время как его предок не определен, как table (или table-row-group), будет создан анонимный элемент, отнесенный к display: table; чтобы включить в него ряд и любые последующие родственные элементы, которые также определены display: table-row;. Также, если элементу, определенному как table-row, не хватает элемента table-cell непосредственно в нем, будет создан анонимный элемент table-cell, чтобы включить в него все элементы, определеные как table-row.

Рассмотрим на примере:

ROW A ROW B Not a row

Верхние два элемента div, имеющие класс «row», определяются в display: table-row; и будут отображены друг под другом, как если бы они были рядами в одностолбцовой таблице, а последний элемент div не будет включен в эту таблицу.

Аналогично, если элемент отнесен к любому другому параметру display , поддерживающему элементы, которые находятся прямо внутри родительского табличного элемента, такие как table-row-group, table-header-group, table-footer-group, table-column, table-column-group и table-caption, но не имеет предка, опеределенного как display: table;, будет создан анонимный элемент table, чтобы включить в него элемент и любые последующие родственные элементы, с подходящими значениями display.

Другие полезные аттрибуты таблиц

При использовании CSS таблиц, из-за того, что элементы соответствуют обычным правилам табличной разметки, вы можете также применять другие табличные CSS аттрибуты. Вот несколько из них, которые могут пригодиться:

Table-layout

Присваивание table-layout значение fixed сообщает браузеру, что таблица должна вопроизводиться по фиксированному алгоритму форматирования ширины ячеек. Это полезно в разметке с фиксированной шириной, которую мы создавали ранее.

Border-collapse

Так же, как и с обычными HTML таблицами, вы можете использовать аттрибут border-collapse для выбора используемых границ между ячейками таблицы разметки из collapse или separate.

Border-spacing

Если вы задали значение separate для аттрибута border-collapse, вы можете использовать аттрибут border-spacing для задания ширины пространства между границами ячеек.

Создание идеальной сетки

Создание сетки из равных по высоте элементов всегда было сложностью при использовании традиционных техник CSS разметки, но таблицы CSS очень хорошо подходят для этой задачи. Например, если мы хотим создать галерею картинок, состоящую из сетки изображений с названиями, похожую на нижеизображенную, то использование CSS таблиц сильно облегчает задачу.

Код для нашей галереи выглядит так:

A lily in the gardens of The Vyne Country House Fuchsia plant in my garden A crazy looking flower This robin has been visiting our garden over the summer. He is very friendly and doesn't seem to be too worried about sharing the garden with us.

Каждая ячейка изображения галереи содержит элемент img и заголовка в элементе p, находящегося в div c классом «image». Каждая строка содержится в div с классом «row», а вся галерея располагается в элементе div c классом «grid».

CSS, требуемый для разметки нашей сетки очень прост:

.grid { display: table; border-spacing: 4px; } .row { display: table-row; } .image { display: table-cell; width: 240px; background-color: #000; border: 8px solid #000; vertical-align: top; text-align: center; } .image p { color: #fff; font-size: 85%; text-align: left; padding-top: 8px; }

Этот CSS довольно простой, но вы можете заметить, как мы используем аттрибут border-spacing для управления расстановкой наших ячеек изображений. Это самый легкий способ создания сетки разметки — и мы предотвратили все проблемы, связанные с равными высотами или хрупкими разметками, создаваемыми с помощью флоатед элементов.

Применение примеров на практике

В этой статье были рассмотрены основные примеры использования табличных параметров CSS аттрибута display, служащего долгожданной наградой в борьбе за создание надежных сеток разметки с использованием CSS! Мы разобрали многочисленные табличные параметры display, посмотрели на природу анонимных табличных элементов и открыли несколько полезных свойств таблиц CSS.

Следующий шаг за вами — в любом случае вы поняли потенциал использования CSS таблиц для создания сеток разметки и теперь сгораете от любопытства. Используя знания, полученные из этой статьи, вы можете начать эксперименты со своими собственными табличными CSS разметками.

Версия на английском.

W3C CSS API селекторы — методы querySelector() и querySelectorAll()

Skaizer — Mon, 03 Nov 2008 12:20:47 +0000

Методы querySelector() и querySelectorAll() позволяют принимают в качестве аргументов CSS-селектор и возвращают найденные элементы в виде элементов DOM.

Разница между этими методами заключается лишь в количестве возвращаемых элементов — первый найденный или все найденные в документе. Кроме того, что они более универсальны, чем getElementById() и getElementByTagName(), наши 2 метода отличаются невероятной скоростью поиска, так как они используют преимущества тех же механизмов, которые использует браузер для идентификациии элементов стиля во время просмотра CSS страницы.

Если говорить о совместимости с браузерами, то querySelector() и querySelectorAll() поддерживаются в Firefox 3.1+, IE8+ (только в стандартном режиме IE8), и Safari 3.1+.

Метод querySelector()

Этот метод относится как к объектам «Document», так и к «Element». Это позволяет вам запрашивать либо всю цепочку элементов всего документа, либо какую-либо ее часть в поиске нужного вам элемента.

Он принимает в качестве аргумента параметра любой CSS-селектор (IE: "#mydiv img") и возвращает первый совпавший элемент (если их несколько) или null если нет совпадений. Например:

document.querySelector('#myheader') //возвращает элемент с ID="myheader" document.querySelector('p.description') //возвращает элемент P с class="description" document.querySelector('#content img:nth-of-type(1)') //возвращает первой изображение, содержащее "#content" document.querySelector('#myform input[type="radio"]:checked') //выбирает отмеченный пункт из "#myform" document.querySelector('#biography, #gallery') //вовращает или элемент "#biography" или "#gallery", в зависимости от того, какой из них был найден первым в списке

Обратите внимание на последний пример — вы можете передавать несколько CSS-селекторов, разделяя их запятой («,»). Запятая играет роль логического «или», которое позволяет querySelector() возвратить первый элемент из дерева документов, который совпадает с одним из введенных CSS-селекторов.

Небольшая демонстрация

Нижеописанный HTML-код создает 2 вложенных DIV с изменяющимся цветом фона внутреннего DIV при наведении курсора мыши на внешний DIV.

Пример показывает использование querySelector() одновременно в виде метода «Document» и «Element»:

Метод querySelectorAll()

Этот метод возвращает не только один элемент, совпадающий с CSS-селектором, но и все остальные, в виде «staticNodeList». «StaticNodeList» — это статичный набор элементов, на которые не влияют последующие изменения, происходящие в дереве документов, например удаление одного из элементов. Метод имеет аттрибут «length», позволяющий вам заносить каждый из похожих элементов в массив. Примеры:

document.querySelectorAll('.mygroup'); //вовзращает все элементы с class="mygroup"; document.querySelectorAll('option[selected="selected"]'); //возвращает каждый выбранный по умолчанию пункт меню document.querySelectorAll('#mytable tr>td:nth-of-type(1)'); //возвращает первый элемент каждой строки таблицы "mytable"; document.querySelectorAll('#biography, #gallery'); //возвращает и элементы "#biography" и "#gallery"

Время для демострации!

Давайте используем querySelectorAll() для быстрого определния выставленных чекбоксов:

Your hobbies:Movies Sports Reading Sleeping

Открыть пример

Ограничения IE8

В IE8 есть несколько ограничений, которых нужно придерживаться используя querySelector() и querySelectorAll():

Ваш документ должен соответствовать стандартному режиму IE8, чтобы эти 2 метода работали. Документ становится нестандартным, если он имеет не четкий тип, или настроен для работы со стандартом IE7 с помощью мета-тега: .

IE8 не поддерживает дополнительный параметр «NSResolver», используемый в querySelector() или querySelectorAll() для определения префиксов имен в XHTML документах.

По соображениям безопасности, IE8 не будет возвращать элементы, полученные с использованием CSS-селекторов «:visited» или «:link». Это сделано для того, чтобы веб-мастера не могли определить ссылки на страницы, посещенные пользователем.

«reset.css» — сброс стандартных стилей

Octane — Wed, 17 Sep 2008 15:36:51 +0000

Тема сброса стандартных стилей, устанавливаемых браузером, поднималась многими веб-разработчиками огромное количество раз. В сети Интернет существует множество готовых решений, начиная от простого * {padding: 0; margin: 0} и заканчивая отдельными таблицами стилей, учитывающими особенности различных браузеров и для разных устройст вывода.

Я считаю, каждый верстальщик должен написать для себя такой файл самостоятельно, ну или хотя бы хорошо разобраться в готовом решении, если он, конечно, не ощущает себя «макетонарезочным аппаратом» или гуру технологии «copy-paste».

Воспользовавшись замечательной системой поиска «Google» Вы сможете найти множество вариантов реализации файла «reset.css». Я хочу показать Вам для примера свой вариант таблицы стилей сброса стандартного оформления, устанавливаемого браузером:

@charset "utf-8"; body, h1, h2, h3, h4, h5, h6 { font: 14px/18px Verdana, sans-serif; } code, kbd, pre, samp, tt, var { font: 14px/18px Consolas, "Courier New", monospace; } body, optgroup { color: #000; background: #fff; } body, code, dl, dd, form, pre { margin: 0; } a:link { color: #009; } a:link, a:visited, ins { text-decoration: none; } a:visited { color: #505; } a:hover { text-decoration: underline; } a:link img, a:visited img, object, fieldset, abbr, acronym { border: none; } sub, sup { position: relative; display: inline-block; font-size: 11px; line-height: 11px; } sub { top: 5px; vertical-align: middle; } sup { top: -2px; margin-top: -11px; } abbr, acronym { cursor: help; border-bottom: 1px dotted #999; } address, cite, dfn { font-style: normal; } code, pre { white-space: pre-wrap; } img { vertical-align: bottom; } td, th, textarea { vertical-align: top; } input, select, button { overflow: visible; vertical-align: middle; } legend { color: #000; margin: 0 0 -2px; padding: 0; } li { display: block; list-style: none; } optgroup option { padding-left: 22px; } table { border-collapse: collapse; } caption, th { text-align: left; } td, th { padding: 0; } address, blockquote, h1, h2, h3, h4, h5, h6, fieldset, p, ol, ul { margin: 0; padding: 0; } th, h1, h2, h3, h4, h5, h6 { font-weight: normal; } q { quotes: "\00ab" "\00bb" "\201e" "\201c"; } q:after { content: "\00bb"; } q:before { content: "\00ab"; } q > q:after { content: "\201c"; } q > q:before { content: "\201e"; }

Для IE нужно добавить еще:

legend { margin-left: -7px; }

Таблица стилей ориентирована на использование совместно с «XHTML 1.0 Strict».

Некоторые могут возразить и сказать, что это не «reset.css», а уже какой-то «base.css» — возможно и так, со временем этот файл вырос в размерах и стал включать в себя некоторые стили, которые я обычно описывал в своих проектах.

Объяснять, что для чего написано, думаю, не стоит, до меня это уже сделали не один десяток раз. Поясню только эти выкрутасы с inline-цитами — это для правильного отображения кавычек вложенных inline-цитат в «Safari».

Скачать «reset.css»

Полезно почитать

Избегайте устаревших приёмов в веб-дизайне, а так же не забывайте, что и «Internet Explorer» оказывается тоже обновляется, и уже доступна 8-я версия (правда пока бета 2) для которой тоже нужны ~~костыли~~ специальные средства, чтобы старые сайты корректно отображались.

Использование !important в CSS

Octane — Sat, 09 Aug 2008 17:20:44 +0000

В статье пойдет речь о том, какими способами можно избежать использования «!important» в CSS.

Итак, почему же стоит отказаться от «!important»?

Во-первых, этот параметр не поддерживает IE6. Во-вторых, в некоторых браузерах могут возникать конфликты с пользовательскими таблицами стилей. В-третьих, это лишний код, без которого, в большинстве случаев, можно обойтись.

Рассмотрим простой пример использования:

XHTML

Первый абзац Второй абзац Третий абзац

CSS

#content p { color: #009; } .p1 { color: #900; } .p2 { color: #090 !important; }

Результат

Первый абзац

Второй абзац

Третий абзац

Получилось, что цвет текста, описанный в классе «p1», не перекрыл значение цвета, заданное через идентификатор родительского контейнера «#content» для дочерних элементов «p». Это произошло, потому что приоритет стилей, заданных через идентификатор объекта, выше, чем приоритет класса. В случае с «p2» для параметра «color» задано значение «!important», что дает ему высший приоритет, поэтому мы видим в третьем абзаце текст зеленого цвета.

Представим, что нам требуется таким образом перекрыть много CSS-параметров, тогда получится что-то вроде этого:

#content p { margin: 0 12px; padding: 12px 0; color: #009; font-size: 14px; line-height: 18px; text-align: center; } .p2 { margin: 0 24px !important; padding: 24px 0 !important; color: #090 !important; font-size: 12px !important; line-height: 24px !important; text-align: left !important; }

Довольно громоздко и некрасиво получилось, не так ли? Давайте подумаем, как обойтись без «!important». Мы знаем, что стили идентификатора перекрывают оформление класса, поэтому и запишем все через идентификатор «#content»:

#content p { margin: 0 12px; padding: 12px 0; color: #009; font-size: 14px; line-height: 18px; text-align: center; } #content .p2 { margin: 0 24px; padding: 24px 0; color: #090; font-size: 12px; line-height: 24px; text-align: left; }

Вот, то, что нужно, ни одного «!important» и все работает так, как и хотелось. Вернемся к нашему примеру и перепишем его без использования «!important»:

CSS

#content p { color: #009; } .p1 { color: #900; } #content .p2 { color: #090; }

Результат

Первый абзац

Второй абзац

Третий абзац

Результат тот же, что и в первом примере, но мы избавились от «!important», а значит избежали проблем, приведенных в начале статьи, да еще и сократили код, если требовалось бы перекрыть несколько параметров.

До момента написания статьи, я ни разу не встречал такого использования CSS-селекторов:

#identificator.class /* или */ .class#identificator

Как оказалось, применение такой конструкции есть. Допустим, у нас есть меню навигации:

Главная Проекты Партнеры О нас Контакты

И по каким-то причинам, стили описаны следующим образом:

#main, #projects, #partners, #about, #contacts { background: #0ff; }

Например, для того, чтобы выделить ссылку на текущую страницу, мы добавляем для нее класс «current», т. к. идентификатор уже задан, но теперь чтобы перекрыть значение параметра «background» нам потребуется использовать «!important»:

#main, #projects, #partners, #about, #contacts { background: #0ff; } .current { background: #ff0 !important; }

Вроде бы «!important» не так и сильно мешает и запись довольно короткая, но вспомним, что IE6 не понимает его. Что же делать? Перепишем код, используя конструкцию, о которой говорилось чуть выше:

#main, #projects, #partners, #about, #contacts { background: #0ff; } #main.current, #projects.current, #partners.current, #about.current, #contacts.current { background: #ff0; }

Все заработало, аналогично примеру с «!important», но теперь и в IE6. Возможно, пример не совсем удачный потому, что получилось больше кода.

Уверен, что найдется и применение конструкции «.class#identificator». Надеюсь, прочтение этой статьи, поможет Вам сократь использование «!important» в ваших таблицах стилей.