27 июня 2014 в 12:22

Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах tutorial



В нашем отделе веб-разработки есть хорошая традиция. Каждые 2 недели у нас проходят «голые пятницы» — это мини-конференции, на которых мы делимся интересными и полезными знаниями, накопенными в процессе работы. Сегодня таких знаний у нас накопилось довольно много, и мы решили начать постепенно делиться ими с общественностью в лице Хабрасообщества.

Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!

Центрирование блока по вертикали и горизонтали


Чаще всего такие блоки с помощью свойств top и left смещают на 50%, а затем сдвигают в центр отрицательными отступами. Но есть более элегантный способ, о котором знают не все:

{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}



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

Вывод строки текста в многоточие


Довольно-таки старое свойство (работает в IE 6!), однако официально было добавлено только к стандарту CSS3. Так как его применение нечасто встречается в сети, можно сделать вывод, что о нем знают не все.

.text-overflow {
    white-space: nowrap;       /* Перво-наперво, запретим перенос строк */
    overflow: hidden;          /* Скрываем текст, который не помещается в блок */
    text-overflow: ellipsis;   /* Уводим текст в многоточие */
    display: block;            /* Элемент обязательно должен быть блочным */
}


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

Блоки с зависимой шириной


Допустим, мы хотим добавить на сайт боковую панель.

<aside class="panel">
    ...
</aside>
<div class="content">
    ...
</div>

Причем, ширина контента зависит только от ширины панели. Как это сделать без явного указания ширины? Способ есть:

.content {
    overflow: hidden;
}
.panel {
    float: right;
    width: 20%;
}


Как видите, «overflow: hidden» решил все проблемы.

Эллиптические углы


Немногие знают (или просто не используют на практике), что в параметре border-radius можно задавать не 4, а целых 8 параметров, по 2 параметра на угол. В этом случае первый параметр задает радиус по горизонтали, а второй — по вертикали. Пример:

.circle {
    border-radius: 150px/100px 100px/200px 0 0;
}



Немного о псевдоэлементах


Псевдоэлементы :before и :after по умолчанию будут перекрывать элемент, к которому они добавлены. В случае, когда псевдоэлемент нужно поместить по оси Z ниже родителя, указывается отрицательный z-index.

Также, псевдоэлементы не будут работать с тегами, в которых не может быть текстового контента. К ним относятся <img>, <br> и, как ни странно, <input>.

А вот <hr> по какой-то причине подхватывает псевдоэлементы нормально.

Бонус: мини-firebug на чистом HTML


Просто вставьте на страницу этот код:

<style contenteditable style="display: block; border: 1px solid black; width: 90%; height: 300px; position: fixed; bottom: 50px; left: 5%;"></style>

contenteditable
Вуаля, все работает. Спасибо, HTML5!
Штука практически бесполезная, однако, если ей задать больший размер шрифта, может сослужить хорошую службу во время презентаций. Ведь мало кто сможет разглядеть крохотные буковки настоящего firebug-а.

На сегодня все. Всем спасибо за внимание! Ждем ваших комментариев!
Автор: @Paul_King
Похожие публикации

Комментарии (75)

  • +23
    За «вывод строки текста в многоточие» большое спасибо!
    • 0
      Опередили. Простой и элегантный способ!
      Автору спасибо за статью!
      • +1
        Спасибо на добром слове)
        • +6
          Жаль что это только для однострочников.
        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Вроде бы такая возможность уже как несколько лет есть в последних версиях популярных браузеров.
  • +1
    Не знаю как в фаербаге, но хромовская dev-панелька прекрасно зумится.
    • 0
      Фаербаг тоже зумится через «Ctrl +», но с голым текстом как-то нагляднее. На мой вкус)
  • +2
    «В случае, если позиционируется блок, а не изображение, придется также задать ему высоту.»
    И ширину…
    • 0
      Да, иначе он растянется на всю ширину.вы правы. Спасибо за уточнение, добавил в статью.
    • 0
      Я сначала очень обрадовался, но когда понял про ширину и высоту стало обидно(
      • 0
        Можно выравнять не задавая ширины/высоты.

        .element {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        }
        • 0
          Правда, иногда из-за «translate» в Mac OS шрифты и картинки рендериться криво начинают. Но в большинстве случаев все ок.
  • +8
    Псевдоэлементы :before и :after по умолчанию имеют большее значение z-index, чем элемент, к которому они добавлены.


    Псевдоэлементы :before и :after по умолчанию имеют значение z-index: auto, и ничем по поведению не отличаются от обычных дочерних элементов. Вы что-то неверно сформулировали?
    • 0
      Да, я хотел сказать, что они будут распологаться над родителем. Спасибо, что поправили!
      • +2
        :before будет под родителем, :after — над. Как если бы они были обычными элементами размещёнными в DOMe в порядке :before, element, :after
        • +9
          :before и :after находятся не перед и после элемента, а перед контентом и после контента внутри элемента соответственно.
          • 0
            Согласен. Вы правы.
        • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Спасибо, подача с помощью гифок очень наглядна — будем использовать этот приём. По поводу блоков с шириной — подозреваю, что там могут проблемы возникать при различных высотах, так что лучше нефлоатному блоку в явном виде задать маргин нужной ширины.
  • 0
    А вот так можно центрировать динамические и фиксированные блоки codepen.io/ReklatsMasters/pen/ykbdo?editors=110 без абсолютного позиционирования.
    • +1
      Отличный способ! Но использовать transform в таких важных вещах пока не все могут себе позволить) К сожалению.
    • 0
      самый лучший вариант, но если в таком блоке находится форма, то подстановка ранее вводимых в инпуты данных (выпадающее такое меню) выскакивает там, где должно было бы быть без трансформа.http://codepen.io/anon/pen/AkFxn
    • +2
      Ну, для этих целей правильнее использовать flexbox, раз уж мы говорим о css3.
  • +1
    Также, псевдоэлементы не будут работать с тегами, в которых не может быть текстового контента. К ним относятся <img>, <br> и, как ни странно, <input>.

    А еще select и textarea, но если надо прикрепить псевдоэлемент на кнопку, то лучше использовать не input, а button.
  • +9
    >>>Также, псевдоэлементы не будут работать с тегами, в которых не может быть текстового контента.

    Заработают, но не во всех браузерах:

    -webkit-appearance: none;
    -moz-appearance: none;

    А вообще какие-то детские примеры. Я понимаю зафигачать скрытие/показ alert через css по клику. Например — codepen.io/LFeh/pen/oEula
    • 0
      Да, мы решили начать с попсовых приемов, дальше постараемся взять что-нибудь позавернутее.
      • –5
        Простите, а зачем?
        1) На хабре и так полно уже всяких дайджестов и сборников.
        2) Подобные вещи гуглятся/нарабатываются с опытом.

        Расскажите лучше о своём рабочем процессе, инструментах или о тех же «фишках», но с примерами задач, которые эти «фишки» решают.
        • +3
          Ну, как видите, даже древнее свойство text-overflow: ellipsis знают далеко не все) О рабочем процессе и инструментах постараемся рассказать. Просто решили начинать с малого.
          • +1
            Рассказывайте дальше. Кому не интересно, никто не заставляет читать, ведь?

            Можете голосовалку вконце добавить «понравилось/не понравилось» для душевного спокойствия.

            Мне 90% было известно, но только ради text-overflow: ellipsis — стоило читать.
    • +1
      А псевдо-класс :target — вершина мастерства? 0_o
      • 0
        Если вы додумались его так использовать — да.
  • +1
    очень хорошая традиция
  • +1
    А объясните кто-нибудь неучу, почему разработчики стандартов и браузеров не могут организовать все так, чтобы очевидный способ
    <body style="text-align:center;vertical-align:middle;">
    
    работал применительно ко всему содержимому? Кто или что от этого пострадает, кроме энтропии?
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      нужно еще вот это добавить
      html{
        height: 100%;
      }
      body {
        min-height: 100%;
      }
      
  • 0
    Спасибо, покажу верстальщикам, чтоб больше не говорили, что красиво оверфлоувить текст с подстановкой многоточия на клиенте никак не сделать :)
    • +9
      Этот способ работает только если текст одной строкой, так что не радуйтесь раньше времени.
  • +4
    Вот как оказвается можно! В перечне тэгов, к которым contenteditable применяется, style нет. Вот список:

    <a>, <abbr>, <address>, <area>, <b>, <basefont>, <bdo>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>

    Попробовал добваить этот атрибут к script — не работает. Добавляет div и br на каждый перевод строки. А жаль.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        А в чем, собственно, проблема на элемент script повесить сей атриабут? Он будет работать точно также, как и в, к примеру, элементе «p». Вопрос зачем остается открытым, но это вполне работает.
        • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Мало кто знает про 4й аргумент свойства box-shadow — размер тени:

    box-shadow: 0 0 5px 5px rgba(0,0,0,.5);

    Ссылка на JSFiddle
    • 0
      На самом деле, есть ещё параметр inset, который указывает, что тень должна располагаться внутри элемента. А ещё можно перечислять список теней через запятую. А вообще, на htmlbook.ru все свойства очень подробно описаны.
  • +5
    Классная подборка!

    // Удивило, сколько людей не знает про text-overflow O_o
  • 0
    Рецепт «Блоки с зависимой шириной», не лучшее решение. Елементы внутри этого контента, которые по задумке могут располагаться вне этого контента (например всплывающие подсказки при наведении/клике на какой то елемент) будут обрезаться. На мой взгляд лучше вместо overflow использовать левый или правый margin такой же величины как и ширина панели.
    • 0
      Но ведь фишка данного метода как раз в гибкости. Ширина будет подстраиваться автоматически, в зависимости от ширины панели, без задания конкретной ширины.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Элемент с display:table «съедет», если там окажется слишком широкое содержимое: широкая картинка или непереносимый текст.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            C overflow:hidden нет — всё лишнее обрезается.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                и то и другое.
      • 0
        С таблицами лучше не шутить. Смысл переходить на блочную верстку, еслт блокам задавать display: table?)
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            И все-таки, преврашение блоков в таблицу — это неправильно. Из идеологических соображений)
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Личных)
                Таблицы нужно верстать таблицами. В исключительных случаях, когда иначе нельзя, можно использовать display: table и table-cell.
                А маскировать блоки под таблицы — это грязный метод, полухак какой-то. Лучше уж использовать флексбокс, и эмулировать его js-ом в старых браузерах.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    Говорят, в W3C подумывали отменить table-cell, поэтому не знаю, зачем его придумали)
                    Согласен, он иногда полезен, порой использую его для вертикального вырванивания. Но верстать на его основе основную структуру сайта — это перебор.
                    • НЛО прилетело и опубликовало эту надпись здесь
                    • +1
                      Не знаю зачем придумали, но display: table-cell, ровно как и таблицы, имеют одно неоспоримое преимущество там, где флоаты и инлайн-блоки пасуют — выравнивание по базовой линии (первой строки, а не последней как у инлайн-блоков).
          • 0
            В новом проекте так и сделал, но ради совместимости для старых ие прописываю табличные стили.
            serdidg.github.io/FioraUI/docs/content/Columns.html#examples

            ПС. Ещё очень очень в бете.
  • +1
    Прием с тегом style просто взорвал мозг. Это невероятно, что так можно, спасибо.
  • 0
    В таблицах трюк с точками не сработает даже если обернуть текст в блок с классом .text-overflow, пока не задашь размер в пикселях. Что досадно…
    • 0
      Можно ставить table-layout: fixed на таблицу, но враппер над текстом всё равно нужен.
  • +1
    Это очень круто! Спасибо. Особенно понравилось про центрировние и про сайдбар.
    Пишите еще ;)
  • 0
    интересненько… а сделать два, скажем, соседних блока с автоматической одинаковой высотой не пробовали? как ячейки у таблицы…
    • 0
      Об этом уже была статья habrahabr.ru/post/64173/
      На практике я использовал метод с фоном, в крайнем случае через table-cell.

      А в идеале, если не нужно поддерживать старые браузеры, используйте flexbox.
  • 0
    не вариант… нужны свободные блоки, произвольное количество в ширину- 3-5-8 блоков, чтоб в одной линии одинаковая высота была… вобщем, без таблиц не решаемо… предлагать забыть про старые броузеры- не вариант, использовать скрипты тоже не вижу смысла-- вы видели итог работы ваших скриптов на машинке 5-10и летней давности, на которой ещё 3-4 приложения запущено? по моему, в крайность ударились-- как угодно, лишь-бы без таблиц…
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        получается, стандарты ради стандартов? в этом есть смысл?
        • НЛО прилетело и опубликовало эту надпись здесь

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

Самое читаемое Разработка