В задачах вёрстки периодически возникают моменты, когда появляется необходимость выровнять какой-нибудь список по ширине экрана. При этом пункты этого списка должны выравниваться равномерно, прижимаясь своими крайними элементами к границам контейнера, а расстояние между ними должно быть одинаковым.
Чтобы было более понятно, о чём идёт речь, приведу пару изображений.
На рисунках видно, что при разном разрешении экрана, пункты всё равно продолжают выравниваться по ширине, примыкая к боковым стенкам и делая отступы между собой – равнозначными.
В этой статье я хочу подробнее разобрать разные варианты решения данной задачи, а также рассмотреть все плохие и хорошие стороны этих методов.
Как можно видеть со списка изменений, в этой сборке довольно много фиксов, изменений и улучшений. Так как их много, я расскажу о нескольких важных вещах ниже:
Конфиденциальность
Эта сборка Wahoo добавляет поддержку технологии Do Not Track, которая разрешает браузерам пользователей запрещать их отслеживание в интернете. По умолчанию эта функция отключена, но мы можем её активировать, включив следующие опции в настройках Opera: "Preferences > Advanced > Security > Ask websites not to track me"
Нужно помнить, что это будет работать только когда сайт акцептует запрос. Некоторые сайты уже сейчас делают это. И эффект DNT будет оценен, чтобы убедиться, что эта технология является жизнеспособным решением в долгосрочной перспективе.
(перевод заметки из блога Тэба Эткинса, участника рабочей группы CSS в W3C, редактора ряда спецификаций)
Я вот уже месяц собираюсь написать этот пост. Плоховато у меня с планированием времени.
Если вы следили за моим блогом в последний год или около того, вы наверняка в курсе, что я — основной редактор спецификации CSS Flexbox. Я взялся за эту спецификацию, потому что посчитал, что исходная спецификация была слишком буквально "слизана" с XUL, и что мы можем сделать лучше. В частности, я надеялся переписать спецификацию так, чтобы можно было использовать обычные свойства боксовой модели (ширину, высоту, отступы, поля), придавая им гибкость напрямую. Покопавшись в моих архивах, вы найдете несколько попыток переписать ее в таком ключе.
Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.
В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и ,конечно же, обсудим все их стороны.
Многие верстальщики наверняка сталкивались с неприятной особенностью, которая касается абсолютного позиционирования в ячейках таблицы, в Firefox. Неприятность заключается в том, что в браузерах Firefox, вплоть до последней версии (Firefox-9 на данный момент) нет поддержки position : absolute как в таблице, так и в самих её ячейках. Т.е. мы, например, не сможем позиционировать какой нибудь блок или элемент, относительно <table> или <td>, ну или любых других элементов таблицы, типа <tr>, <tbody> и т.д.
По моим наблюдениям, на форумах, часто задают вопрос с просьбой помочь в решении этой проблемы. Да, и мне порой, эта неприятность доставляет массу неудобств, подталкивая к изобретению обходных путей и прочих костылей . В этой статье, я предлагаю всё же выяснить, что это на самом деле, баг или фича, и можно ли считать Firefox неправым в данной ситуации? А так же найти наконец решение этой проблемы.
Михаил
Радион
morokko
SelenIT