Схема работы data:URL

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAKCAMAAADII105AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFdQTFRFrnsAqncA16QA39OvsowzyrBt3aoAto8z7NNvy5sQwI0A4Lk4z6g0x5QAwqht28Jv/8wA/9Ib1KEAupMz58ph//nC/9tB///d/+Vv7L0UzpsA//Cc+Pj4Zr1LNgAAAHRJREFUeNqU0FkKgDAMBNDRutXdaq3Wuf85jaL/6ZDCYyBQAkqqin+UhLypaaav1PJZcyG4r9USfYyb91uMPROIIVxvwsAEwrTdIelawwSCpd0ltpQf6wmu53LKrNLqCWLO6zqfn5PqCRbZSI5ZIa2etwADAF/7KlmRn64EAAAAAElFTkSuQmCC" alt="image"/>

Где data:[<тип данных>][;base64],<данные>

Аналогичным образом можно использовать вставку картинок в CSS:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAKCAMAAADII105AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFdQTFRFrnsAqncA16QA39OvsowzyrBt3aoAto8z7NNvy5sQwI0A4Lk4z6g0x5QAwqht28Jv/8wA/9Ib1KEAupMz58ph//nC/9tB///d/+Vv7L0UzpsA//Cc+Pj4Zr1LNgAAAHRJREFUeNqU0FkKgDAMBNDRutXdaq3Wuf85jaL/6ZDCYyBQAkqqin+UhLypaaav1PJZcyG4r9USfYyb91uMPROIIVxvwsAEwrTdIelawwSCpd0ltpQf6wmu53LKrNLqCWLO6zqfn5PqCRbZSI5ZIa2etwADAF/7KlmRn64EAAAAAElFTkSuQmCC) top left no-repeat;

Вот пример реализации data:URL

Но эта схема не лишена недостатков:

1. Необходимо каждый раз пересчитывать base64 для картинки при ее изменение
2. Бразуры Internet Explorer 5-7 не поддерживают data:URL

Первый недостаток решается небольшой php строкой:

<?php echo base64_encode(file_get_contents("stars.png")) ?>

Второй не достаток можно решить путем передачи браузеру Internet Explorer дополнительного файла стилей, который будет экранирован от других браузеров условным комментарием. Необходимо раскрутить сайт в поисковых системах? Воспользуйтесь услугами студии, которая выполнит продвижение сайта в ТОП Гугла, Яндекса и других поисковых систем.

Источник информации: websiteoptimization.com

Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0 (подробней об этом свойстве можно прочитать в заметке «Создание модульного окна с прозрачной подложкой«).

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

  
/*---------- Стили классов -----------*/
input {
margin:0;padding:0;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
background:url(f_logincheckbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
background:url(f_logincheckbox_off.png) no-repeat 0 3px;
}

/*---------- Скрипт изменения класса-----------*/

function logincheckboxCheck () {
  if (document.getElementById("checkbox1").checked) {
	document.getElementById("checkboxDiv").className="checkboxOn";
   }
	else {
	 document.getElementById("checkboxDiv").className="checkboxOff";
	}
}

/*---------- Верстка-----------*/

<div id="checkboxDiv" class="checkboxOn">
	<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" class="checkboxOn" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>

Пример полностью кроссбраузерный. Посмотреть реализация можно по ссылке Пример стилизации Chebox

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

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

К недостаткам реализации такого метода относится то, что независимо от ширины экрана количество товаров в строке остается постоянным и единственное чем может отличаться организация, это реализация – ширины таблицы. Таблица с товарами может быть или фиксированной ширины и центрироваться, или резиновой и растягивать товары в строке на всю ширину основного блока сайта.

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

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

Второй метод состоит в реализации элементов списка в виде строчных элементов которые в блоке списка(ul/ol) выравниваются по центру, а в элементе списка размещен структруный элемент с display:inline-block. В результате получим галерею, в которой в строке элементы выровнены по центру и их количество зависит от разрешения экрана. Вот пример реализации второго метода .

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

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

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

Подключения стилей

Ни для кого не секрет информация о существовании тега link которые позволяет подключать внешние таблицы стилей. Но вот об атрибуте media многие забывают. Этот атрибут позволяет указать браузеру для чего используется таблица стилей и может получать значения screen, print, aural, handheld, projection, tv. Таким образом, можно задать отдельные стили для оформления информации для экарана монитора или для вывода на печать. К сожалению сейчас можно говорить об адекватной поддержке только двух параметров screen и print.

Капитель в текстах

В типографике кроме прописных и строчных букв есть еще один тип начертания символов – Капитель. Капитель внешне похож на уменьшенный вариант прописных букв, но на самом деле, это совсем другое начертание букв. В ряде книг капитель рекомендуют применять для набора имён, некоторых названий и аббревиатур и шрифтовых выделений в тексте. Заголовок этого параграфа набран капителием. Для задания капители в верстке есть отдельное свойство каскадных таблиц – font-variant:small-caps;

Некоторые псевдоклассы

Кроме всем известного псевдо класса :hover(IE6 без дополнительных мер поддерживает этот псевдо класс только для ссылок), который задает стиль для объекта над которым находится курсор, и :link,: active, :visited, есть еще ряд других полезных псевдо классов. К ним относится псевдокласс :focus (выделяет активный элемент, например поле в которым находиться курсор, IE7 и ниже не поддерживают ), :first-child (стилевое оформления для первого дочернего элемента), :first-letter (стилевое оформления для первой буквы элемента), first-line(стилевое оформления для первой строки элемента), :after(псевдокласс, который используется для вывода желаемого контента после элемента IE7 и ниже не поддерживают), :before(псевдокласс, который используется для вывода желаемого контента до элемента IE7 и ниже не поддерживают).

Оформления пробелов и запрет переноса

В html 3 для того чтоб запретить переносить строку если она не помещается в контейнер использовался тег nobr, в html 3.2 и выше этот тег считается устаревшим, но его функцию заменяет параметр CSS white-space, который может принимать такие значения: nowrap (переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега br переносит текст на новую строку), pre (текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки), pre-wrap (сохраняются все пробелы и переносы. Однако если текст по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку, не работает в IE6, для поддержки нужно дописать параметр word-wrap: break-word; который можно вынести в отдельный файл стилей для IE чтоб сохранить валидность).

Выравнивание текстов возле элементов формы

Если в одной строке помещать поле ввода, или другой элемент формы вместе с текстом, который указывает назначение этого поля, элементы формы будут выровнены относительно базовой линии строки, причем в разных браузерах будут визуальные отличия в расположении. Для того чтоб изменить расположения элементов формы, скажем выровнять по вертикали, нужно воспользоваться параметром vertical-align задав ему одно из допустимых значений: top, middle, bottom, baseline, также допускается значение заданное в процентах.

А вопрос приоритетности стилей решает принцип специфичности. Специфичность это что-то вроде таблицы «рангов» селекторов стилей. Стиль, который имеет приоритет выше, присваивается атрибуту, если в каскаде нет селектора, который имеет такую же специфичность и объявлен позже. Специфичность стиля записывается в виде четырех порядков (0,0,0,0). Чем больше число, тем выше специфичность, порядок который стоит левее является более значительным по сравнению с правым, таким образом, специфичность (0,1,0,0) является высшее специфичности (0,0,0,99). Значение специфичности селектора вычисляется таким образом:

• Для каждого указанного в селекторе значения идентификатора(#someID) к специфичности добавляется 0,1,0,0.
• Для каждого указанного в селекторе имени класса(.someClass), псевдокласса(:hover) или атрибута([href=”http://zodios.net”]) к специфичности добавляется 0,0,1,0
• Для каждого заданного в селекторе элемента(h1,strong,div) к специфичности добавляется 0,0,0,1

Пример расчета специфичности:

h1 {color:red}  /*специфичность — 0,0,0,1*/

p em {color:#000}  /*специфичность — 0,0,0,2 */

.color {color:#fff} /*специфичность — 0,0,1,0*/

p.bright em.dark {color:#ff0000}  /*специфичность — 0,0,2,2*/

#color {color:#333}  /*специфичность — 0,1,0,0*/

em#color {color:#666}  /*специфичность — 0,1,0,1*/

Кроме специфичности для параметров стилей есть еще дополнительный атрибут !important. Этот атрибут делает указанный параметр(не селектор) высшее чем аналогичный параметр в селекторе который имеет более высокую специфичность. Атрибут !important записывается через пробел до закрывающего знака «;».

h1#someID /*специфичность — 0,1,0,1*/{
color:green;
text-decoration: line-through;
}

h1  /* специфичность — 0,0,0,1*/{
color:red !important;
text-decoration:underline;
}

В результате тексту который будет находиться в элементе <h1 id=”someID”> будет присвоен красный цвет несмотря на то, что специфичность первого селектора выше, но начертание текста будет зачеркнутым, так как !important относится только к параметру color. Но если !important присвоено двум одинаковым параметрам, верх берет тот, специфичность селектора которого выше.

Источник — «CSS — каскадные таблицы стилей. Подробное руководство.» Э.Мейер

Знак ударения для любой буквы

Иногда, при написании некоторых слов, нужно явно указать ударение. Есть два выхода: первый состоит в заменой аналогичными латинскими буквами с знаком ударения таких как Á, è. Правда это создает лишние неприятности, такие как невозможность поиска, или проверки орфографии этого слова. Но что делать, если нужно поставить ударение над буквой і, или я? В этом случае на помощь приходит спец-символ &#x301;. Его нужно размещать после буквы, над которой нужно поставить ударение. В конце заметки приводиться пример с использованием знака ударения.

Перенос неразрывной строки

В блоках с резиновой шириной порой случается досадная ситуация, когда внутри него находится строка текста без пробела, тогда при чрезмерном сужении блока строка вываливается из него из-за невозможности ее перенести. Для того чтоб переносить неразрывную строку существует специальный тег <wbr> который отлично работает, но не проходит валидацию при доктайпе XHTML-типа. Но есть более красивый способ, чтоб сделать перенос неразрывной строки с прохождением валидации. Для этого на помощь приходит спец-символ &shy;, он вставляет знак переноса(дефис) в установленном месте, если строка не помещается в отведенные границы и переносит остальную часть текста на другую строку.

Как убрать пунктирную рамку у ссылок, которая появляется при клике по ним в FireFox

Многие неоднократно замечали, что в браузере FireFox в момент клика по ссылке вокруг не возникает пунктирная рамка цвет, который указан в стилях для ссылки. Недостаток этой рамки в том, что она иногда идет в разрез с общим дизайном макета(когда для ссылки задается особый контур), или имеет очень большие размеры если ссылка является блоком с бекграудом под которым прячется текст используя IR метод Phark (подробней о методе можно прочитать в заметке Как заменить текст картинкой). Чтоб убрать эту пунктирную рамку достаточно для нужной ссылки задать в стилях свойство outline-style:none; Свойство outline-style задает тип рамки(dotted, dashed,solid,double) вокруг объекта, которая не влияет на размеры объекта. То есть если есть блок шириной в 300 пикселей и в нем располагаются два плавающих блока с шириной по 150, то их рамки в 5 пикселей заданные через outline-width не будут влиять на размеры блоков, но будут накладываться друг на друга. Есть еще свойство outline-color, которое задает цвет рамки, к тому же все три свойства можно записывать в сокращенной форме outline:5px double #000; К сожалению, это свойство не поддерживается браузерами Internet Explorer 7 и ниже.

Вот пример реализации всех вышеуказанных полезностей и свойства outline
(для отображения разрыва строки нужно изменить размеры окна браузера)

Источники материала:
webew.ru
fastcoder.org

• Arial
• Arial Black
• Arial Narrow
• Book Antiqua
• Century Gothic
• Comic Sans MS
• Courier New
• Franklin Gothic Medium
• Georgia
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotype
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings
• Wingdings

Ниже приводится ссылка на таблицу, в которой можно посмотреть шрифты в разных начертания (жирный, курсив, подчеркнутый). Для масштабирования шрифта нужно зажать кнопку Ctrl и крутить колесико мышки.

Таблица стандартных шрифтов

Еще есть несколько он-лайн инструментов для подбора красивого шрифта. Это:

FontTester
TypeTester

Оба сервиса англоязычные, но поддерживают кириллицу. Преимущество FontTester в том, что в нем размер шрифтов можно задавать в разных величинах. Зато в TypeTester можно увидеть сразу шрифт с жирным начертанием, курсивом, заглавными буквами и в разных комбинациях этих состояний.

Еще есть бесплатная оффлайновая программа для подбора шрифтов – FontPicker.

Ну и конечно, для визуального подбора шрифта в готовой верстке можно использовать аддон FireFox – FireBug

Типография

Искусство расположения, создания композиции из наборного материала на плоскости листа.

Типограф

Человек заинтересованный в работе с текстом, с его пластической стороной. Удобочитаемость(readability) – Характеристика длинных текстов, предназначенных для сплошного чтения, и шрифтов для набора таких текстов. Самый удобочитаемы шрифт – самый нейтральный и незаметный.

Различимость(legibility)

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

Заметность(visibility)

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

Удобочитаемость (readability)

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

Графема

Идея, базовая форма знака. Графема позволяет отличать конкретный знак, как от беспорядочного сочетания форм, так и от любого другого осмысленного знака.

Текстовые шрифты

Шрифты, предназначенные для набора сплошных текстов, принято называть текстовыми. Текстовые шрифты наиболее консервативны в отношении формы. Они должны быть максимально привычными и незаметными, чтобы не отвлекать читателя от содержания текста.

Заголовочные и выделительные шрифты

Обычно часть текстовой гарнитуры. Они встречаются в сплошном тексте и служат для того, чтобы привлечь внимание к его фрагментам или заголовку.

Акцидентные шрифты

Акцидентные шрифты еще называют декоративными. Их главная задача – привлечь внимание читателя. Обычно акцидентные шрифты используют в крупных кеглях.

Дуктальные шрифты

Словом дукт называют одно движение руки при письме (то есть за один дукт появляется один штрих буквы). Дуктальные шрифты имеют в своей основе письмо каким-либо инструментом. Следует понимать, что никакой наборный шрифт, кроме имитации почерка, не является буквальным воспроизведением написанных знаков.

Глиптальные шрифты

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

Инструмент письма

Форма буквы при письме зависит не только от графемы, но и от того, чем буква была написана. Инструменты письма могут быть трёх типов. Пишущая поверхность которых представляет собой вытянутый прямоугольник (в упрощенном понимании – линию). Это любое ширококонечное перо, плоская кисть и другие инструменты. Толщина штриха, нанесённого ими, зависит от его направления. Во-вторых, такие, след от которых меняется в зависимости от нажима. Это остроконечное перо и круглая кисть. При письме инструментами первых двух типов буквы получаются контрастными. В – третьих, с пишущей поверхностью обычно округлой формы, след от которых заметно не меняется ни от силы нажима, ни от поворота. Это карандаш, фломастер с острым концом, шариковая ручка.

Антиква (serif)

Контрастный шрифт с засечками.

Брусковый шрифты (slab-serif)

Неконтрастный или малоконтрастный шрифт с засечками, близкими по форме к прямоугольнику.

Гротеск, рубленый шрифт (sans serif)

Шрифт без засечек, как правило, неконтрастный.

Динамика и статика шрифта

Динамика или статика зависят от того, к какому типу письма ближе шрифт. Динамические шрифты происходят от письма широконечным пером, статические – остроконечным. Степень динамики и статики шрифта зависит от наклона осей овалов, открытости, или закрытой формы знаков, контраста, формы засечек, соотношения ширины прописных знаков.

Кернинг

Для нормального чтения нужно, чтобы межбуквенные пробелы в строке были визуально одинаковыми. Однако существуют такие сочетания знаков, между которыми возникают «дырки». Чтобы от них избавиться, при проектировании цифрового шрифта в него закладывают информацию о конкретных парах знаков (AV), расстояния между которыми надо корректировать.

Типометрическая система

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

Пункт(point)

Основная единица типометрической системы. Пункт равен приблизительно 1.72 части дюйма(0.353мм).

Кегль

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

Строчные буквы

Буквы принятые для набора сплошного текста. В просторечии строчные буквы называют «маленькими».

Прописные буквы (заглавные)

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

Капитель

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

Апрош, межбуквенный пробел

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

Трекинг

В редакторах вёрстки трекингом называют равномерное увеличение или уменьшение апрошей на каком-либо участке текста. Им периодически пользуются при вгонке и выгонке.

Выключка (justification)

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

Вгонка и выгонка

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

Интерлиньяж

Это расстояние между базовыми линиями соседних строк. Базовый интерлиньяж равен кеглю, т.е расстояние между базовыми линиями при таком интерлиньяже равно высоте кегельной площадки.

Мне понравился вот такой простой способ фикса этого недостатка. Решение сводится к тому, что для ИЕ создается отдельный файл стилей, который экранируется условным комментарием и в него добавляется expression, который эмулирует свойство min-width.

width:expression(document.body.clientWidth < 770? "770px": "auto");

Для того, чтоб сэмулировать max-width нужно изменить знак неравенства на противоположный.

width:expression(document.body.clientWidth > 770? "770px": "auto");

Для эмуляции также есть другие варианты типа подключения JS файла, который рассчитывает ширину окна и подставляет необходимые величины в width, или эмуляция этого свойства путем создания дополнительных блок и стилей которые создают эффект min-width.

Лично мне вариант с expression кажется самым лучшим. Он избавляет от подключения JS скриптов. Учитывая, что под IE6 пишутся хаки почти при каждой верстке, это еще и позволяет добиться валидаци css и вытянуть все лишние элементы в отдельный файл, который будет видимый только для IE6

Источник материала