Веб-разработчик
59,3
рейтинг
21 апреля 2014 в 18:21

Разработка → 12 малоизвестных возможностей CSS перевод

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

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

color не только текст красит


Начнем, пожалуй, с простых вещей. Свойство color используется разработчиками постоянно. Те из вас, у кого не так много опыта работы с CSS, возможно, и не знали, что это свойство определяет не только цвет текста!



HTML
<img alt="Example alt text" width="200" height="200">

<ul>
  <li>Example list item</li>
</ul>

<ol>
  <li>Example list item</li>
</ol>

<hr>


CSS
body {
  color: yellow;
  background: #444;
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}

ul {
  border: solid 2px;
  text-align: left;
}

ol {
  text-align: left;
}

hr {
  border-color: inherit;
}



Обратите внимание, что в CSS свойство color:yellow используется лишь раз применительно к элементу body. Как видите, всё окрасилось в желтый цвет:

  • Альтернативный текст на месте отсутствующего изображения
  • Рамка у элементов списка
  • Маркер ненумерованного списка
  • Номер упорядоченного списка
  • Элемент hr


Интересно, что по умолчанию элемент hr не наследует значение свойства color, однако этого можно достичь, установив свойству border-color значение inherit. Как по мне, так это несколько странное поведение.

Продемонстрированное подтверждается спецификацией:

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

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

Свойство visibility может иметь значение collapse


Вам наверняка доводилось использовать свойство visibility, и не раз. «Обычные» значения — visible (по умолчанию у всех элементов) и hidden, которое скрывает элемент, оставляя при этом под него место (в отличие от display:none).

Третье, редко используемое значение — collapse. Работает так же, как и hidden применительно ко всем элементам, кроме табличных рядов, колонок и их групп. В случае с элементами таблиц предполагается, что значение collapse скроет их подобно display:none таким образом, что на ранее занимаемом ими месте расположится другое содержимое таблицы.


Ожидаемое поведение

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

Из того, что обнаружил я:

  • В Хроме разницы между collapse и hidden не наблюдается (посмотрите этот баг репорт и комментарии)
  • В Файрфоксе, Опере и ИЕ 11 collapse, похоже, работает как следует: ряд таблицы удаляется, а тот, что был ниже, поднимается наверх


Теперь вы знаете чуточку больше, тем не менее из-за разного поведения браузеров использовать visibility:collapse вряд ли имеет смысл.

Новые значения свойства background


В CSS 2.1 короткая запись свойства background включала в себя пять значений следующих свойств: background-color, background-image, background-repeat, background-attachment и background-position. Начиная с CSS 3 добавилось еще три значения, так что данное свойство теперь выглядит так:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip]


Обратите внимание на слеш, который ставится там подобно короткой записи свойства font и border-radius [ссылка]. Этот слеш позволит вам включить значение background-size после background-position в тех браузерах, которые это поддерживают. Также вы можете добавить еще два значения: background-origin и background-clip.

Итоговый синтаксис:

.example {
     background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}


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

Свойство clip работает только на абсолютно спозиционированных элементах


Наверняка вы в курсе свойства clip. Используется оно так:

.example {
    clip: rect(110px, 160px, 170px, 60px);
}


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

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}


А теперь посмотрите, как свойство clip перестает работать, если мы уберем абсолютное позиционирование элемента.

Помимо position:absolute вы также можете использовать position:fixed, поскольку, согласно документации, зафиксированные элементы также квалифицируются как «абсолютно спозиционированные».

Вертикальные проценты рассчитываются относительно ширины контейнера, а не его высоты


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

Посмотрите демо.

Заметьте, что вложенный элемент имеет три отступа, заданных в процентах (верхний и нижний внутренние отступы и нижний внешний отступ). Слайдер изменяет только ширину контейнера. Однако её изменение влияет на просчет отступов. Зависимость именно от ширины контейнера показана в выводе величин на страницу.

Свойство border


Все мы когда-либо делали это:

.example {
  border: 1px solid black;
}


Свойство border объединяет значения свойств border-width, border-style и border-color в единую конструкцию. Но не забывайте, что каждое из свойств, значение которых содержит border, само по себе является сокращенной записью. Так, например, border-width может быть записано следующим образом:

.example {
  border-width: 2px 5px 1px 0;
}


Таким образом мы установим разную ширину рамки для всех четырех сторон элемента. То же относится и к свойствам border-style и border-color. Нечто вот такое ужасное можно получить:



HTML

<div class="box"></div>
<p>Please don't ever do this.</p>


CSS
body {
  font-family: Arial, sans-serif;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: peachpuff chartreuse thistle firebrick;
  border-style: solid dashed dotted double;
  border-width: 10px 3px 1px 8px;
}

p {
  text-align: center;
}



Можно пойти еще дальше и задать эти значения по отдельности с помощью свойств border-left-style, border-top-width, border-bottom-color и так далее.

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

Свойство text-decoration — теперь сокращенная запись


Я знал: что-нибудь из этого списка обязательно вскружит вам голову. А спецификация гласит, что теперь это стандарт.

a {
  text-decoration: overline aqua wavy;
}


Данное свойство теперь может содержать в себе значения трех свойств: text-decoration-line, text-decoration-color и text-decoration-style. К сожалению, Файрфокс — единственный браузер, который поддерживает новые свойства, но при этом (видимо, для обеспечения обратной совместимости) не поддерживает сокращенный синтаксис.


Ожидаемый результат

Попробуйте эту демку в Файрфоксе. В ней новые свойства используются по отдельности. С ними надо быть аккуратнее, ибо в данное время браузеры не смогут распарсить дополнительные значения у свойства text-decoration и просто пропустят его. А это нехорошо с точки зрения обратной совместимости.

Свойство border-width поддерживает ключевые значения


Это, конечно, не нечто из ряда вон выходящее, да и не ново, тем не менее помимо обычных значений ширины (напр., 5px или 1em) border-width поддерживает три ключевых значения: medium, thin и thick.

По факту, начальное значение свойтва border-widthmedium. Ниже продемонстрировано значение thick:



В спецификации CSS конкретная ширина для ключевых значений не прописана, однако все браузеры используют 1px, 3px и 5px соответственно.

«Никто не использует border-image»


Не так давно я писал о свойстве border-image на SitePoint. Оно поддерживается всеми современными браузерами, за исключением IE 10 и ниже. Но кому какая разница?

border-image — весьма забавное свойство, которое позволяет обрамлять контейнер неким изображением.



Также посмотрите демо.

К сожалению, border-image — одна из новинок, пользующаяся недостаточной популярностью. Хотя, возможно, я не прав. Если у вас есть примеры использования border-image — добро пожаловать в комментарии!

Есть такое свойство empty-cells


И оно поддерживается всеми браузерами, включая IE 8:

table {
  empty-cells: hide;
}


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

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

Свойство font-style поддерживает значение oblique


Наиболее используемые значения данного свойства — normal и italic. Но есть еще и oblique.



И что же это значит? Почему текст выглядит так же, как если бы он был написан курсивом?

Спецификация объясняет данное поведение следующим образом:

… выбирает шрифт, помеченный как наклонный, иначе — курсивный.

Описание курсива в спецификации — примерно о том же. Термин «наклонный» (oblique) — из типографики, обозначает, собственно, наклоненный текст, но не настоящий италик.

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

Не знаю шрифтов, которые бы имели наклонное начертание, но я могу ошибаться. (Ошибается. Сам привести конкретных названий шрифтов не могу (они однозначно существуют), но в комментариях к оригинальной статье в пример приводят шрифт Helvetica, — прим. переводчика) Насколько я понял, шрифт не может иметь оба начертания: курсив и наклонное — одновременно, поскольку наклонное начертание является искусственной заменой курсива в тех шрифтах, в которых его нет. (Здесь тоже несколько сомнительно, особенно что касается замены курсива, — прим. переводчика)

Так что, если я не ошибаюсь, когда шрифт не имеет курсивного начертания, значение свойства font-style:italic на самом деле покажет нам значение свойства font-style:oblique.

Большое спасибо Ogi за комментарии относительно путаницы в терминологии, теперь это исправлено и вместо «гарнитуры» — «начертание», а вместо «италика» — «курсив», — прим. переводчика

word-wrap — то же, что и overflow-wrap


Свойство word-wrap используется не так часто, однако в некоторых случаях может оказаться полезным. Очень распространенный пример — разбиение длинной непрерывной строки текста во избежание выхода за пределы контейнера.

Поскольку данное свойство придумали в Microsoft, оно поддерживается всеми браузерами, в том числе IE с версии 5.5.

Несмотря на кросс-браузерность и надлежащую поддержку, W3C решило заменить свойство word-wrap на overflow-wrap: по всей видимости, они посчитали прежнее название неправильным. overflow-wrap имеет те же значения, что и word-wrap, а последнее сейчас рассматривается как «альтернативное».

Несмотря на то, что поддержка overflow-wrap еще мало распространена, не стоит переживать, ибо мы все так же можем использовать word-wrap: браузеры его поддерживают в том числе и в целях обратной совместимости.

Что до overflow-wrap — там уж когда все популярные браузеры обновятся, а пока я не вижу смысла что-то менять.

Много ли нового узнали вы из всего этого?


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

Добро пожаловать в комментарии!
Перевод: Louis Lazaris
Ян Иванов @franzose
карма
38,5
рейтинг 59,3
Веб-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

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

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

  • +1
    Первый пункт действительно стал откровением, спасибо! Убежал чистить свои таблицы от дубликатов цвета в color и border-color.
    • 0
      Ага, там много всего интересного)
  • 0
    полезно, спасибо
    • +9
      Было бы круто, будь возможность вставлять демки из Codepen прямо в статью, как в оригинале и в Smashing Magazine, например…
  • 0
    Не знаю шрифтов, которые бы имели наклонную гарнитуру, но я могу ошибаться. (Ошибается. Сам привести конкретных названий шрифтов не могу (они однозначно существуют), но в комментариях к оригинальной статье в пример приводят шрифт Helvetica, который имеет наклонную гарнитуру. — прим. переводчика) Насколько я понял, шрифт не может иметь обе гарнитуры: италик и наклонную — одновременно, поскольку наклонная гарнитура является искусственной заменой италика в тех шрифтах, в которых его нет. (Здесь тоже несколько сомнительно, особенно что касается замены италика, — прим. переводчика)


    Хотелось бы примеров шрифтов с наклонной гарнитурой. В чем суть-то ее? Если смысл курсива понятен, то зачем наклонную гарнитуру включать, когда она прекрасно программно получается, непонятно. Или это просто костыльная замена нативного курсива от ленивых дизайнеров шрифтов?

    Я верно понимаю, что в вебе не добиться разного отображения italic и oblique? В редакторе, например, увидеть ее просто (в том же фотошопе, та же Georgia отлично демонстрирует). Пробовал, как шрифты имеющие курсивную гарнитуру, так и без нее: в обоих случаях и italic, и oblique дают одинаковый результат (в отсутствии курсива под italic выдается наклоненный шрифт, при наличии курсива в oblique также он отдается).
    • +6
      Представьте, что вы в Фотошопе делаете трансформацию skew в правую сторону: грубо говоря это и есть облик. А у италика начертание букв даже отличается, появляются скругления, например.

      Чтобы быстрее вам ответить, прямо из Википедии скопировал:

      • –1
        Я прекрасно понимаю разницу между наклонной гарнитурой и курсивной. Вопросы совсем о другом же.
    • 0
      Одинаковое отображение Georgia в примере объясняется тем, что у этого шрифта нет наклонной гарнитуры, только италик.
      • 0
        В посте сказано, что курсив и наклонная гарнитура в одном шрифте одновременно быть не могут. Собственно, предполагаю, что то, что называют наклонной гарнитурой, включенной в состав шрифта, на самом деле костыль от разработчиков шрифта. Они просто наклонили шрифт и сказали, что это курсив.

        Вот только при наличии курсива фотошоп может сделать наклонный шрифт, игнорируя наличие курсива, а браузер отказывается. Хотя техническую возможность наклонить шрифт он имеет.
        • 0
          Ну, например Helvetica Neue имеет курсивную гарнитуру, хотя по сути она — наклонная.

          Да, действительно, вы правы. Проверил на Times New Roman, Хром при font-style:oblique подставляет именно курсивную гарнитуру. Хех, интересно.
          • 0
            A value of 'normal' selects a font that is classified as 'normal' in the UA's font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.

            The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.

            В спецификации ничего не сказано про невозможность существования одновременно курсивного и наклонного начертания. Отсюда делаю вывод, что, по-хорошему, речь не о костылях, а о реальной возможности существования именно наклонного начертания, а не использования его в качестве замены. Тогда почему бы ему не сосуществовать в мире и согласии с курсивом?

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

            А вопрос про наклонное начертание интересен, и срочно требуется шрифтовик, который разъяснит.
            • 0
              Как мне кажется, в спецификации и не может быть такого сказано о начертаниях. Это ж разработчики шрифта определяют, какие гарнитуры внедрить в шрифт. Другое дело, как сами браузеры с ними работают…

              Это и вправду очень интересная тема.
              • 0
                Я не спец по шрифтам, не знаю, как там все хранится и делается, поэтому мои суждения могут оказаться в корне неверными, но все же, посудите сами. Если шрифт может хранить курсивное и наклонное начертание раздельно (а не наклонное под видом курсива), то как может обосновываться невозможность одновременного хранения обоих начертаний?

                К тому же, сама спецификация создавалась не на пустом месте. Вряд ли авторы решили «мы разделим наклонный и курсивный, и нам плевать, что в имеющихся шрифтовых форматах такого разделения нет». Они четко говорят про a font that is labeled 'oblique' и a font that is labeled 'italic'.

                Допускаю, что нормой является отсутствие наклонных начертаний в составе шрифта именно в силу простоты его программной генерации из нормального.
                • 0
                  Я опытным путем проверил: программно шрифт наклоняется только в том случае, если у него отсутствует курсивное начертание, в противном случае oblique выдает курсив.
                  • 0
                    Э-э-э, а если шрифту без курсивного начертания поставить фонт-стайл: италик, то будет отображаться нормальное начертание?
                    • 0
                      Нет, точно так же текст будет программно наклонен.
                      • 0
                        Я, тогда, честно говоря, не понял разницу между oblique и italic. Если italic предпочитает курсивное начертание, а если его нет, выдаёт программно наклонённое, и при этом oblique делает то же самое, то в чём прикол тут вообще?

                        Я бы понял, если бы oblique всегда программно наклоняло шрифт, невзирая на присутствие курсивного начертания.

                        P. S. Извините за… медленную реакцию.
                        • 0
                          Именно это и обсуждалось. Браузеры ведут себя, не соответствуя нормальной логике. Протестировать бы какой-нибудь шрифт, у которого есть встроенные и italic, и oblique, но oblique в шрифтах я, кажется, не встречал вообще.
    • 0
      > Если смысл курсива понятен, то зачем наклонную гарнитуру включать, когда она прекрасно программно получается, непонятно
      В том-то и дело, что не прекрасно.
      www.marksimonson.com/notebook/view/FakevsTrueItalics
      • –1
        Я, видимо, недостаточно эстет, чтобы понять проблемы автора. Впрочем, и для него наши проблемы так же далеки, ведь мы обсуждаем разграничение наклонного и курсивного начертания, а он сетует на то, что простая деформация не делает нормальное начертание удовлетворительным курсивом. К тому же, я не уверен, что его реализация «simply slanted» полностью соответствует той, которая используется, например, в браузерах.
  • +2
    Жаль, что visibility: collapse не работает адекватно. В некоторых случаях неудобно использовать свойство display для переключения состояния элемента через JS, так как необходимо запоминать предыдущее состояние этого свойства. Не сказать чтобы проблема, есть 100501 способ решить эту задачу, но visibility кажется логичнее — оно как раз и служит, чтобы скрывать и показывать элементы, тогда как у display это скорее побочная функция, а основная — выбор типа элемента.
    • 0
      И не известно, заработает ли…
    • +2
      Проблемы совсем нет. Когда нужно показать элемент: ` element.style.display = null ` — и значение берется из стилей или default стилей.
      • +1
        О чём и речь. Решить-то можно, но выглядит коряво до невозможности. Просто плохой дизайн закрепился и теперь считается технологическим решением. collapse намного логичней.
  • –5
    Такое чувство, что кто-то открыл для себя спецификацию.

    С inherit интересный трюк, но раньше он не работал в ИЕ,.
    • +1
      Есть такое) Меня больше всего заинтересовали два свойства: visibility:collapse и empty-cells:hide, поэтому решил таки перевести статью.
  • +1
    Border-image — очень интересный инструмент, позволяющий легко делать адаптирующиеся к размерам контента боксы
    Вот пример: take.ms/xApbc (возможно, не самый удачный, но достичь соответствия макету можно было достичь только либо использовав фоновое изображение, либо border-image) Код здесь: jsfiddle.net/8yQN7/
    • 0
      Столкнулся недавно с аналогичной задачей, необходимо было создать рамку в стиле конверта (с диагональными наклонными линиями). К сожалению, у меня не получилось использовать border-image, поскольку (на мой взгляд) при его использовании невозможно аккуратно подгонять «стыки» изображений на углах. Если фиксированный размер бокса с рамкой — пожалуйста, но в этом случае есть и другие способы. Поэтому, лично я решил проблему очень тупо: сделал div с фоном в виде той самой диагональной картинки и паддингом на ширину рамки, а внутрь него сунул еще один div с непрозрачным фоном и все, без изысков, зато быстро.
      • 0
        А можно посмотреть картинку?
        Прелесть border-image именно в том, что углы остаются в углах, всё, что между ними — растягивается/сужается таким образом, чтобы влезло целое число отрезков (это если round задать, есть и другие варианты).
        • 0
          А вы присмотритесь к углам в примере который указан выше, сразу видно в чем проблема.
          • 0
            Там углы сделаны ровно так, как было в макете, в общем-то =) Серьезно, пришлите мне картинку, пожалуйста, мне интересно попробовать.
            • 0
              Ну вот выкинул все ненужное, картинку упростил (в оригинале были наклонные линии двух цветов), смысл понятен: как сделать, чтобы эта рамка была границей блока любого размера (блок может менять размер), при условии, что углы на рамке не должны искажаться и сами линии всегда строго параллельны и не искажаются тоже.
              image
              • +1
                Если фон однородный и непрозрачный, то сделать можно. Правда без помощи background-image.
              • 0
                jsfiddle.net/8yQN7/5/ (почему-то какое-то смещение происходит, вот тут всё нормально отображалось, уже не стал разбираться). Действительно, не без недостатков.
                • 0
                  Теоретически, если поэкспериментировать с углом наклона и шириной полосок можно добиться нормального отображения, при условии, что ширина и высота box'а с рамкой меняется не как приспичит, а строго по определенным шагам, но это уже костыли, использование которых удручает.

                  Просто надо учитывать, что повторяющийся кусок на border-image должен быть «вещью в себе» и стыковаться сам с собой как угодно, хотя я и понимаю, что в идеале это вообще должен быть 1 пиксель.

                  Именно поэтому я всегда говорю: хотя дизайнер и верстальщик это разные профессии, но при этом дизайнер обязан понимать особенности верстки, чтобы верстальщик потом не плакал кровавыми слезами пытаясь сверстать «красивости» макета.
              • +2
                Это делается одними градиентами на фоне:

                border: 25px solid transparent;
                background: linear-gradient(#FFF, #FFF) padding-box, repeating-linear-gradient(135deg, teal, teal 15px, white 15px, white 30px) border-box;
                • 0
                  Хм, клево, возьму на заметку, если вдруг опять понадобится сделать конвертик. В любом случае, решение, конечно, не универсальное, хотя и изящное.
    • 0
      Ох, туда же можно всунуть гиф-анимацию.
  • +8
    Вертикальные проценты рассчитываются относительно ширины контейнера, а не его высоты
    Только вчера открыл для себя единицы измерения vh и vw — соответственно проценты высоты и ширины родительского элемента (поддерживается в современных браузерах).
    Эти единицы позволяют, например, сделать padding-top зависящим от высоты (vh), а не от ширины.
    На основе этого свойства я даже сваял Vertical Grid CSS Framework, позволяющий «замостить» экран гридом не только по ширине, но и по высоте.
    • +2
      Только, наверно, всё-таки не родительского элемента, а viewport'a браузера.
      • 0
        Да, верно, спасибо. Перепутал с обычными процентами.
    • 0
      Интересно, что автор даже не упомянул в своей статье данных единиц измерения.
    • 0
      Честно говоря, я и сам про них забыл.
  • +3
    К сожалению, border-image — одна из новинок, пользующаяся недостаточной популярностью. Хотя, возможно, я не прав. Если у вас есть примеры использования border-image — добро пожаловать в комментарии!

    Можно использоавть GIF'ку border-image.com
    • 0
      Забавная вещица, но на это больно смотреть, ИМХО.
      • +1
        где-то встречал что делали таким способом выделение как в фотошопе
        • 0
          Да, фотошоп мне это сразу и напомнило. Раньше тоже такое встречал на сайтах, но как правильно в самописных админках в составе модулей для обрезки изображений. Сейчас же обычно обходятся обычным прямоульником с ключевыми узлами и затемнением.

          В целом для каких-нибудь крупных систем, что должны работать в браузере этот прием имеет место быть.
  • 0
    border-image не корректно работает с border-radius. По крайней мере мне не удалось скрестить эти два стиля.
    • 0
      Есть ли у вас «нерабочий» пример где-нибудь на Codepen или JSFiddle?
      • 0
        Уже нет, иначе бы сразу запостил. Если интересно, то могу восстановить по памяти
        • 0
          Конечно интересно.
      • 0
        Сколько угодно: jsfiddle.net/8yQN7/11/
        Однако это проблема легко решается подготовкой файла с изображением границы.
  • 0
    спасибо, полезная статья. про visibility collapse не знал. а border image использую давно )
  • 0
    Метод расчета вертикальных процентов удобно использовать когда дочерний элемент должен при ресайзе сохранять свои пропорции внутри резинового родителя.
    jsfiddle.net/68Fvf/
  • 0
    Свойство border-width поддерживает ключевые значения
    Было бы славно иметь поддержку ключевого значения для «волосной линии», каковая была во флеше. Что-то вроде самой тонкой линии на данном устройстве.

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