Статьи

Кроссбраузерный <progress>-бар

Максим Усачев
14

Недавно по работе появилось одно интересное заданьице. Сделать прогресс-бар, который мало того, что будет стилизоваться так, как нужно, да ещё и к тому же должен быть кроссбраузерным, начиная с IE7.  

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

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

(обн. )

О семантике HTML и архитектуре веб-фронтенда

SelenIT SelenIT
5

Перевод статьи Николаса Галлахера «About HTML semantics and front-end architecture», переводчик — SelenIT

Собрание мыслей, опыта, идей, которые мне нравятся и идей, с которыми я экспериментировал последний год. Они охватывают семантику HTML, компоненты и подходы в архитектуре веб-фронтенда, способы именования классов и HTTP-сжатие.

Мы не прервем своих исканий,
И под конец всех странствий наших
Придем туда, откуда вышли,
Узнав впервые этот край.

Т. С. Элиот — «Маленький Гиддинг»

Новые и старые единицы измерения (краткий обзор)

Максим Усачев
58

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

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

(обн. )

Главный секрет HTML5

SelenIT SelenIT
20

Пришла пора открыть главный секрет HTML5: его не существует. По крайней мере, в том виде, о котором громче всего говорят. И дело не в том, что "спецификация еще не готова". И даже не в том, что ни один браузер пока не набирает максимума в этом забавном тесте. И даже не в том, что для него существуют (как минимум) две разные спецификации, у одной из которых вообще нет никаких цифр в названии.

И тем не менее, HTML5 повсюду. Даже там, где его не ждали. Даже там, где нет модного короткого доктайпа <!DOCTYPE html> (кстати, тоже без цифры 5), даже без модных "семантичных" (хотя об их смысле не всегда могут договориться сами разработчики спецификаций, не говоря уже о простых вебмастерах) элементов типа <article> и <nav>. Даже в тех браузерах, где эти новые теги и не работают без пинка. Как это может быть?

(обн. )

Элемент <header>

Максим Усачев
1

Ричард Кларк, вторник, 16 июня 2009

В последнее время наблюдается повышенный интерес к HTML 5 и его внедрению в работу web-профессионалов. В HTML 5 спецификации мы видим, что была добавлена масса новых тегов, среди которых и элемент <header>, о котором мы поговорим в этой статье. Мы расскажем про то, когда его использовать и  когда не использовать, что он должен содержать и что не должен. Готовы? Тогда начнем.

Итак, вы привыкли видеть

<div id="header">

на большинстве посещаемых вами сайтов. Теперь, с появлением HTML 5 это больше не требуется и мы можем обогатить семантическое содержимое новым элементом <header>.

(обн. )

Слайдер на CSS3 (без JS*), подстраивающийся под разрешение

Максим Усачев
17

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

В общем что говорить, это нужно увидеть!

(обн. )

Равномерное выравнивание блоков по ширине

Максим Усачев
113

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

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

Универсальная независимость при помощи SVG

Максим Усачев
10

В этой статье мы рассмотрим масштабируемую векторную графику (Scalable Vector Graphics или сокращённо SVG), как одну из наиболее недостающих технологий в современном сайтостроении.

Прежде чем приводить конкретные примеры, давайте посмотрим на уровень web’а сегодня и то, куда он движется. За последние годы дизайн сайтов обозначил новую тенденцию в развитии техники универсального дизайна (Responsive Website Design). И это к лучшему. По существу, универсальный дизайн обеспечивает переход от использования полюбившихся нам фиксированных по ширине страниц, к вёрстке плавающих форм с интеллектуальным перемещением их содержимого. Добавьте к этому продуманную стратегию содержимого и мобильный подход, и мы уже начинаем предлагать универсальный опыт адаптации под множество устройств и браузеров, удовлетворяя потребности конечного пользователя.

(обн. )

Каждый раз, когда вы называете проприетарную фичу словом «CSS3», в мире умирает котенок

SelenIT SelenIT
5

Перевод статьи «Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies» из журнала A List Apart, автор — Лиа Веру, переводчик — SelenIT

Минздрав Интернета предупреждает: каждый раз, когда вы называете проприетарную фичу словом «CSS3», в мире умирает котенок. Любая -webkit-фича, не входящая в спецификации (хотя бы в редакторский черновик) — никакой не CSS3. Да, их часто выдают за него, но они вообще даже не часть CSS. Различать эти вещи — не просто педантство. Это важно, потому что эта путаница мотивирует некоторых производителей браузеров (с таким, кхе-кхе, яблочком на лого…) идти в обход процесса стандартизации, реализовывать в WebKit свою отсебятину, а потом подавать ее вебмастерам как невиданную вкусность. Новые блестящие игрушки ослепляют нас, и мы сами начинаем превозносить их, усиливая эхо рекламного шума.

(обн. )

«Загадочные отступы» между инлайн-элементами

Максим Усачев
100

Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.

В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и ,конечно же, обсудим все их стороны.