Добрый день. В этой коротенькой заметке я расскажу как кроссбраузерно выровнять иконки по базовой линии шрифта. Итак, задача на первый взгляд довольно тривиальна: в макете, который прислал дизайнер существует следующий, весьма стандартный, блок (имя пользователя в хедере после того как пользователь осуществил вход на сайт).
Судя по статистике (обновленной 24 октября) с сайта trends.builtwith.com — jQuery по прежнему лидирует, но теперь имеет «контрольный пакет акций». 50.46% сайтов(в топе 10к) использующие данную библиотеку это отличный результат. Кстати ближайший конкурент(если учитывать фреймворки) на 3-м месте — MooTools, а на 6-м Prototype.
В одном из проектов мне понадобилось реализовать переключение валют с последующим реформатированием значений денежных сумм, встречающихся на странице.Как это у меня часто получается, я это реализовал и через пару недель наткнулся на небольшую библиотечку, которая позволяет довольно удобно выполнить именно эту операцию.
В чём проблема? Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.
Появлению этой методики способствовала воистину монстрообразная вёрстка элементов страницы на нашем проекте. Подумать только, для отображения одной кнопки требовалось до семи тегов на один элемент. Выглядело это примерно так:html. В архив. Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30.
Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.Квадрат#square { width: 100px; height: 100px; background: red; }Прямоугольник#rectangle { width: 200px; height: 100px; background: red; }Круг#circle { width: 100px; height: 100px; background: red;. -moz-border-radius: 50px;.
Питер Гасстон, автор книги по CSS3, опубликовал статью под названием The future of CSS layouts, перевод которой специально для читателей хабра представлен ниже.Несмотря на все поразительные возможности CSS, их недостаточно для реализации фундаментальных принципов разметки страницы. Однако, дополнительные возможности для создания более динамических страниц уже начинают появляться.
Хорошим тоном считается всегда указывать для изображений, которые мы используем на странице, их длину и ширину. Часто такие картинки, если мы не укажем их размеры, могут во время загрузки раскачивать нашу верстку. Чтобы во время разработки было более наглядно, где мы пропустили картинки без указания размеров, ребята из 37Signals предложили небольшой, но чрезвычайно полезный сниппет:img:not([width]):not([height]) { border: 2px solid red !important; }.
Эта статья о горизонтальном margin, о том, откуда считаются проценты и что вообще это такое. О вертикальном margin было написанно в прошлой моей статье.Но! Перед тем, как начать…. Читая ваши отзывы к предыдущей статье я решил исправить некоторые недочеты:Так как некоторые писали, что слово «маргин» «режет» глаз, то именно для них в этой статье будет написано только «margin» В связи стем, что статья была популярна, я решил в одной статье описать и вертикальный и горизонтальный margin, тем самым повторить предыдущую, чтоб можно было добавить одну статью в «избранное» и не возвращаться к старой.
Хороший способ верстки иконок, расположенных рядом с заголовками, или в качестве нестандартных маркеров списка — с помощью псевдо-элементов. Раньше я это делал с помощью дополнительной разметки — например, тега , который позиционировал абсолютно и фоном задавал картинку-спрайт с иконками. Это способ позволяет избежать дополнительной разметки, но для IE младше 8го нужно написать expression, который будет осуществлять вставку псевдо-элемента.