company_banner

Подборка полезных 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-а.

На сегодня все. Всем спасибо за внимание! Ждем ваших комментариев!
  • +101
  • 89.8k
  • 75
Wargaming
107.52
Company
Share post

Comments 75

    +23
    За «вывод строки текста в многоточие» большое спасибо!
      0
      Опередили. Простой и элегантный способ!
      Автору спасибо за статью!
        +1
        Спасибо на добром слове)
          +6
          Жаль что это только для однострочников.
          • UFO just landed and posted this here
          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
                        Согласен. Вы правы.
                      • UFO just landed and posted this here
                    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;">
                                    
                                    работал применительно ко всему содержимому? Кто или что от этого пострадает, кроме энтропии?
                                    • UFO just landed and posted this here
                                        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 на каждый перевод строки. А жаль.
                                        • UFO just landed and posted this here
                                            0
                                            А в чем, собственно, проблема на элемент script повесить сей атриабут? Он будет работать точно также, как и в, к примеру, элементе «p». Вопрос зачем остается открытым, но это вполне работает.
                                            • UFO just landed and posted this here
                                          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
                                                Но ведь фишка данного метода как раз в гибкости. Ширина будет подстраиваться автоматически, в зависимости от ширины панели, без задания конкретной ширины.
                                                • UFO just landed and posted this here
                                                    0
                                                    Элемент с display:table «съедет», если там окажется слишком широкое содержимое: широкая картинка или непереносимый текст.
                                                    • UFO just landed and posted this here
                                                        0
                                                        C overflow:hidden нет — всё лишнее обрезается.
                                                        • UFO just landed and posted this here
                                                            0
                                                            и то и другое.
                                                      0
                                                      С таблицами лучше не шутить. Смысл переходить на блочную верстку, еслт блокам задавать display: table?)
                                                      • UFO just landed and posted this here
                                                          0
                                                          И все-таки, преврашение блоков в таблицу — это неправильно. Из идеологических соображений)
                                                          • UFO just landed and posted this here
                                                              0
                                                              Личных)
                                                              Таблицы нужно верстать таблицами. В исключительных случаях, когда иначе нельзя, можно использовать display: table и table-cell.
                                                              А маскировать блоки под таблицы — это грязный метод, полухак какой-то. Лучше уж использовать флексбокс, и эмулировать его js-ом в старых браузерах.
                                                              • UFO just landed and posted this here
                                                                  0
                                                                  Говорят, в W3C подумывали отменить table-cell, поэтому не знаю, зачем его придумали)
                                                                  Согласен, он иногда полезен, порой использую его для вертикального вырванивания. Но верстать на его основе основную структуру сайта — это перебор.
                                                                  • UFO just landed and posted this here
                                                                      +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 приложения запущено? по моему, в крайность ударились-- как угодно, лишь-бы без таблиц…
                                                                • UFO just landed and posted this here
                                                                    0
                                                                    получается, стандарты ради стандартов? в этом есть смысл?
                                                                    • UFO just landed and posted this here

                                                                Only users with full accounts can post comments. Log in, please.