Заметки с тегом «css» (страница 5)

Сетка из блоков фиксированных размеров

При вёрстке сетки из однотипных объектов (неважно с помощью плавающих блоков или строчных блоков) возникает проблема с отступом у последнего блока в конце строки.

Допустим, контейнер имеет ширину 350px, блок – 80px и зазор между блокам – 10px.

Блоки не поместились в отведённые им размеры

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

Блоки смогут уместиться как задумывалось, если контейнер увеличить на ширину отступа (или чуть больше).


margin-right: -10px;
position: relative; zoom: 1; /* контейнеру нужен hasLayout */

Для зазора между блоками появилось место в контейнере

Если у контейнера есть фон, то стоит создать дополнительную обертку без фона. Увеличив ширину можно получить нежелательный эффект. А избавляться от него с помощью overflow: hidden не всегда бывает приемлемо.

Дополнительная обертка, чтобы не затрагивать фон контейнера

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

Оставте свой комментарий

Градиенты в Photoshop и в браузере

Для меня оказалось откровением то, что градиенты, нарисованные в Photoshop и генерируемые браузером, сильно различаются.

Сравнение градиентов с разными параметрами

По умолчанию параметр smoothness всегда устанавливается в 100%. Но чтобы градиент стал таким же, каким его отобразит браузер, этот параметр нужно установить в 0.

Настройки градиента в Photoshop

Об этой особенности рассказал Олег Мохов в своем докладе на UWDC2012.

PS. В комментариях добавил иллюстрации стыкующихся градиентов.

Комментарии к заметке: 8

Тень у полей ввода в мобильном Safari

У всех полей ввода в мобильном Safari на iPhone и iPad есть легкая внутренняя тень. Если это поле как-то особенно декорируется, то тень может помешать нормальному отображению. Убрать её можно, назначив фоном не сплошной цвет или текстуру, а градиент. 


@media screen and (-webkit-min-device-pixel-ratio:0) {
    .search {
        /* remove inner shadow on iOS input */
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0)));
        background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));
    }
}

Параметры подбираются в зависимости от контекста.

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

Очень простое решение

Роман Комаров подсказал, что эту тень можно убрать более простым способом

.search {
    -webkit-appearance: none;
}
Комментарии к заметке: 3

Таблица без таблицы или display: table-cell для всех браузеров

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

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

.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}

Разметка, например, может быть такой:


<div class="table">
    <ul class="table-row">
        <li class="table-cell">Ячейка 1</li>
        <li class="table-cell">Ячейка 2</li>
        <li class="table-cell">Ячейка 3</li>
    </ul>
</div>

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


.table, .table-row, .table-cell {
    display: block;
    float: left;
}
.table-cell {
    clear: right;
    zoom: 1;
}
.table {
    overflow: hidden;
    position: relative;
}

Комбинация float: left; и clear: right; заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.

Комментарии к заметке: 9

CSS Grid — модульная сетка в YUI3

CSS Grid появился в YUI3 еще когда пакет был на ранней стадии тестирования и перекочевал туда из второй версии YUI. Он открывал широкие перспективы перед программистами верстальщиками в организации структуры страницы. Можно было делить страницу или блок на колонки, сменой всего лишь одного класса менять их местами и много другое. Там применялась обычная техника позиционирования через float: left или float: right.

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

The current Grids system was designed with the needs of older browsers (including Firefox 2) in mind. With Firefox 2 coming off the A-Grade in the next GBS update (due in July), there are structural changes that we want to make in engineering a successor to the 2.x version of Grids.

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

Теперь CSS Grid ориентирован только на работу в современных браузерах и основан на блоках с display: inline-block.

В место гибкости позиционирования колонок слева или справа (сейчас все колонки располагаются только слева направо согласно своему порядку в документе) мы получили возможность выравнивать их по вертикали с помощью vertical-align.

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


<div class="yui3-g">
    <div class="yui3-u-1-4">
        <div>колонка 25%</div>
    </div>
    <div class="yui3-u-1-2">
        <div>колонка 50%</div>
    </div>
    <div class="yui3-u-1-8">
        <div>колонка 12.5%</div>
    </div>
    <div class="yui3-u-1-8">
        <div>колонка 12.5%</div>
    </div>
</div>

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

Интересным моментом этого компонента является то, как разработчики легко избавились от нежелательных зазоров в несколько пикселей между колонками. Так как элементы уже не блочные, то лишние пробелы в коде между блоками с классом yui3-u не игнорируются, а учитываются при отрисовке, как если бы это были пробелы между словами. От этих артефактов можно избавиться, удалив эти пробелы и пожертвовав читаемостью кода. Но такой пробел мог бы случайно возникнуть на любом этапе разработки. В Yahoo поступили гораздо хитрее. Все зазоры между колонками убираются с помощью правил letter-spacing или word-spacing, в зависимости от браузера.

Комментарии к заметке: 8