Css

CSS: блочная модель

Создание фреймов, внутренних отступов и расстояний между отдельными элементами HTML-страниц называется блочная модель (box model). Каждый элемент HTML может быть представлен как сложный, в своем собственном блоке, который имеет следующие компоненты:

поле (margin): внешняя часть блока, бесцветная и прозрачная. Чем больше граница, тем больше расстояние до соседних элементов.
рамка (border): окружает содержимое и внутренние отступы.
внутренний отступ (padding) : расстояние между содержимым поля (самого элемента) и рамкой. В отличие от границы, внутренний отступ может быть цветным — определяется цветом фона рамки.
контент (content): фактическая часть поля, сам элемент — рисунок, таблица, текстовое поле и т. д.

Определение ширины и высоты элемента

Когда вы указываете ширину и высоту элемента с помощью width и height, вы указываете только размер содержимого. Размер всего блока также зависит от границы, рамки и внутреннего отступа.

Например, пусть для элемента указываются следующие параметры:

Для этого блока ширина будет 200 (содержимое) + 2 * 20 (левый и правый внутренний отступ) + 2 * 2 (левая и правая граница) + 2 * 15 (левая и правая граница) = 274 пикселей.

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

Блочная модель и Internet Explorer

Большинство браузеров рассчитывают размеры блоков, как было описано выше. Одним заметным исключением является Internet Explorer — для этого браузера ширина включает рамки border и отступы padding. По этой причине элементы, которые определены шириной width, будут казаться уже, чем в других браузерах. То же самое относится и к высоте height.

Однако, решение проблемы очень простое: достаточно указать DOCTYPE для документа HTML, и Internet Explorer будет соответствовать общепринятому методу использования метода блочной модели.

border-color

Цвет рамки можно задавать несколькими способами:

словом – названием предустановленного цвета на английском языке – red, green, pink и т.д.;
с помощью шестнадцатеричного числа, например #ff0099;
с помощью RGB-модели – rgb (интенсивность каждого из цветов выражается числом от 0 до 255 или в процентах; значения разделяются запятыми).
Посредством RGBA-модели, при которой четвертый параметр цвета – степень его прозрачности.

Цвет по умолчанию – black (черный). Установка значения transparent (border-color: transparent) означает полностью прозрачную рамку.

Примеры записи цвета:

Внутренняя таблица стилей

Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.

Тег <style> позволяет записывать внутри себя код в формате CSS:

Пример: Внутренняя таблица стилей

Результат
HTML-код
Попробуй сам »

В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h1>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.

Границы

Последнее обновление: 21.04.2016

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

border-width: устанавливает ширину границы
border-style: задает стиль линии границы
border-color: устанавливает цвет границы

Свойство может принимать следующие типы значений:

Значения в единицах измерения, таких как em, px или cm
```
border-width: 2px;
```
Одно из константных значений: (тонкая граница — 1px), (средняя по ширине — 3px),
(толстая — 5px)
```
border-width: medium;
```

Свойство в качестве значения принимает цвет CSS:

border-color: red;

Свойство оформляет тип линии границы и может принимать одно из следующих значений:

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

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border-style: solid;
				border-color: red;
				border-width: 2px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

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

/* для верхней границы */
border-top-width
border-top-style
border-top-color

/* для нижней границы */
border-bottom-width
border-bottom-style
border-bottom-color

/* для левой границы */
border-left-width
border-left-style
border-left-color

/* для правой границы */
border-right-width
border-right-style
border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border:

border: ширина стиль цвет

Например:

border: 2px solid red;

Для установки границы для отдельных сторон можно использовать одно из свойств:

border-top
border-bottom
border-left
border-right

Их использование аналогично:

border-top: 2px solid red;

Радиус границы

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border: 2px solid red;
				border-radius: 30px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

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

border-radius: 15px 30px 5px 40px;

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

border-top-left-radius: 15px;	/* радиус для верхнего левого угла */
border-top-right-radius: 30px;	/* радиус для верхнего правого угла */
border-bottom-right-radius: 5px;	/* радиус для нижнего левого угла */
border-bottom-left-radius: 40px;	/* радиус для нижнего правого угла */

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

border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

НазадВперед

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Свертывание границ таблиц

Существуют две разные модели для установки границ ячеек таблицы в CSS: раздельная (separate) и свернутая (collapse).

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

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

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

Fancy Border Box by

The product’s image will be blurred on the site if it does not have a stunning performance. The easier way to boost their image is adding this Fancy Border Box.

The radial-gradient background is the best way to show these. Although the main background is black, the text colors and border color are more outstanding. Such a beautiful box, this Fancy Border Box is so easy to catch the customer’s attention. The content inside the box which divides into heading 1 which is bolded and bigger size and main content under which is shown at the center.

Customers just need a click to install this amazing tool. Let’s install it now.

CSS Border Shadow

The CSS box-shadow property can be used in combination with the border property to create a shadow effect. There are two required values to set the border-style property: the h-offset and the v-offset. Let’s define these below:

h-offset: This value sets the horizontal offset of the shadow. A positive value sets the shadow on the right side of the box, a negative value sets the shadow on the left side.
v-offset: This value sets the vertical offset of the shadow. A positive value sets the shadow below the box, a negative value sets the shadow above.

There are four optional values that you can add after the h- and v-offset values to affect the box-shadow. Let’s take a quick look at them below.

Blur: Include a third value to add a blurred effect. The higher the number, the more blurred the shadow will be.
Spread: Include a fourth value to define the spread of the shadow. A positive value increases the size of the shadow, a negative value decreases it.
Color: Include a color name, hex code, or other color value to define the color of the shadow. If no color value is included, the shadow color is the text color.
Inset: Include the inset keyword to set the shadow inside the box.

You can also define multiple shadows. Simply separate the set of required and optional values by commas. Make sure to increase the h- and v-offset values of the cascading shadows so you can actually see them.

Let’s take a look at examples defined by different border-shadow values below.

See the Pen CSS Border Shadow by Christina Perricone (@hubspot) on CodePen.

Gradient border without pseudo elements by

The shop owners can make their shops distinguish with this Gradient border without pseudo elements because it has the most effective tool to create the shop’s appearance.

The grey button is outstandingly displayed on the white background. Moreover, the main grey color also allows the blue and red gradient colors to be outstanding. Moreover, border-width defines the width is large enough to attract the customer’s attention. In addition, the capital texts in the button are easy to follow.

On the screen, the shop owners can boost the beauty of their frontend by adding this Gradient border without pseudo elements.

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS», а именно:

Шестнадцатеричная запись ( #ff00aa ) цвета.
Формат RGB — rgb(255,12,110) . Формат RGBA для CSS3.
Форматы HSL и HSLA для CSS3.
Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS.

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Спецификация

Specification

Начальное значение	как и у каждого из подсвойств этого свойства: : как и у каждого из подсвойств этого свойства: border-top-width (en-US): border-right-width (en-US): border-bottom-width (en-US): border-left-width (en-US): border-style (en-US): как и у каждого из подсвойств этого свойства: border-top-style (en-US): border-right-style (en-US): border-bottom-style (en-US): border-left-style (en-US): border-color (en-US): как и у каждого из подсвойств этого свойства: border-top-color (en-US): border-right-color (en-US): border-bottom-color (en-US): border-left-color (en-US):
Применяется к	все элементы. Это также применяется к .
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: : как и у каждого из подсвойств этого свойства: border-bottom-width (en-US): абсолютная длина или , если border-bottom-style (en-US) — или border-left-width (en-US): абсолютная длина или , если border-left-style (en-US) — или border-right-width (en-US): абсолютная длина или , если border-right-style (en-US) — или border-top-width (en-US): абсолютная длина или , если border-top-style (en-US) — или border-style (en-US): как и у каждого из подсвойств этого свойства: border-bottom-style (en-US): как указано border-left-style (en-US): как указано border-right-style (en-US): как указано border-top-style (en-US): как указано border-color (en-US): как и у каждого из подсвойств этого свойства: border-bottom-color (en-US): вычисленный цвет border-left-color (en-US): вычисленный цвет border-right-color (en-US): вычисленный цвет border-top-color (en-US): вычисленный цвет
Animation type	как и у каждого из подсвойств этого свойства: border-color (en-US): как и у каждого из подсвойств этого свойства: border-bottom-color (en-US): border-left-color (en-US): border-right-color (en-US): border-top-color (en-US): border-style (en-US): discrete : как и у каждого из подсвойств этого свойства: border-bottom-width (en-US): border-left-width (en-US): border-right-width (en-US): border-top-width (en-US):

Описание

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

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

Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.

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

Значение по умолчанию:	не определено
Применяется:	ко всем элементам
Анимируется:	да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.border=»3px solid blue»

Reddit border inset challenge by

There are many choices for online sellers to create better shopping experiences. However, this Reddit border inset challenge is one of the best and cheapest solutions for online sellers.

A beautiful cover picture is attractive for any visitors. That image is totally outstanding on the white background. In addition, the reddit white borders outside of this picture, which makes it more stunning. The titles are capital and in Pragati Narrow font so that the shop owners can impress their customers easily. Especially, these texts are customizable so that the users can change their message without many efforts.

In conclude, the Reddit border inset challenge is so attractive for any comers. With this border, the shoppers will come back more and more to website.

Кастомные свойства или CSS-переменные?

Многие называют их CSS-переменными. Говоря «переменная», возникает вопрос о типах данных, которые в ней хранятся. Подразумевают, что в переменных могут храниться те типы данных, которые существуют в конкретном языке программирования. Но в CSS всё не так. В CSS есть много разных типов данных: . В переменных можно записать код цвета или размер элемента, но сохранятся эти данные как строки. Это накладывает ряд ограничений на разработчика при использовании кастомных свойств там, где важен тип данных. Например, в медиа-запросах. Именно поэтому мы используем термин «пользовательские» или «кастомные» свойства, принятый в документации.

CSS рамки (border)

CSS border команды дают возможность определить вид рамки: тип, цвет и толщина.

Вид рамки

Команда вида рамки задается с помощью border-style и может принимать следующие значения:

none: без рамки
dotted: рамка, сделанная из точек
dashed: рамка — пунктирная линия
solid: рамка сплошной линией
double: рамка двумя сплошными линиями
groove: трехмерная вогнутая рамка
ridge: трехмерная вогнутая рамка
inset: трехмерная объемная рамка, обращенная внутрь
outset: трехмерная объемная рамка, обращенная наружу

Толщина рамки

Свойство толщины рамки задается с помощью border-width, а значение можно указывать как цифрами (в пикселях), так и одним из следующих слов: thin, medium, thick, которые браузер будет интерпретировать автоматически, чтобы создать соответственно узкую, нормальную или толстую рамку

Обратите внимание, что border-width будет эффективно реализован, только если уже указан тип рамки (border-style)

Цвет рамки

Чтобы установить цвет рамки используется border-color. Аналогично цвету текста, сами значения для цвета рамки могут быть:

название цвета, например olive или red;
RGB значение, например rgb(0,255,0)
HEX значение, например #00FF00

Указание цвета рамки будет действительным, только если указан вид рамки (border-style).

Индивидуальные стили для отдельных сторон рамки

Вы можете указать различный тип рамки для каждой из четырех сторон, используя следующие слова:

border-top-style (верхняя рамка)
border-right-style (правая рамка)
border-bottom-style (нижняя рама)
border-left-style (левая рамка)

Аналогичным образом устанавливаются значения цвета и толщины для отдельных сторон: замените стиль на цвет или ширину соответственно (например, border-top-color устанавливает цвет для верхней рамки).

Стиль рамки: сокращенная запись

Все свойства рамки могут быть указаны кратко, используя border:

Порядок значений: толщина, тип, цвет, но, за исключением требуемого значения типа рамки, необязательно устанавливать все значения (если какое-либо значение опущено, браузер будет использовать значение по умолчанию).

CSS Border Width

The CSS border-width property specifies the width of the border. You can set this property using keyword values or length values. Let’s take a quick look at them below.

Keyword values: thin, medium, thick
Length values: px, pt, em, rem, vh, and more

Like the border-style property, the border-width property can have between one and four values. If only one value is defined, then it applies to all sides of the element. If two values are defined, then the first value represents the top and bottom border widths and the second represents the right and left border widths. If three values are defined, the first value represents the top border width, the second represents the left and right, and the fourth represents the bottom width. If four values are defined, they represent the top, right, bottom, and left, respectively.

Let’s take a look at examples defined by different border-width values below.

See the Pen CSS Border Width by Christina Perricone (@hubspot) on CodePen.

Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

border-top — для задания рамки сверху (верхняя граница)
border-bottom — для задания рамки снизу (нижняя граница)
border-right — для задания рамки справа (правая граница)
border-left — для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

border-top-color — задание цвета верхний границы
border-top-style — задание стиля верхней границы
border-top-width — задание толщины верхней границы
и т.д. для каждого направления

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

4.1. Пример. Красивая рамка для выделения цитат

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

Встроенный стиль

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

Такие стили называют встроенными (inline), или внедренными.
Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.

В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:

Пример: Приоритетность стилей

Результат
HTML-код
Попробуй сам »

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

Jagged border — top by

There are millions of online shops, which means that the online market is so competitive that it is difficult to succeed in this market. The online sellers need to change their boring default site with this Jagged border-top. By this tool, the shop owners can create their shops more beautiful.

Three colors tones from the light gray and white and dark gray are displayed stunningly on the background. Moreover, the jagged wrap is so differentiating compared to other shops. That is the reason why shop owners should use it to change their boring performances. On the linear gradient background, these beautiful borders are more and more beautiful.

Last but not least, this Jagged border-top is easy to install with a step. Let’s install it now.

CSS Border Padding

The CSS padding property creates space between an element’s content and an element’s border. If the padding property is not defined, then there is no space between its content and its border.

To add space, you can set the padding property using length or percentage values. Values must be positive. Negative values will not render.

Like the properties above, the padding property can have between one and four values. If only one value is defined, then it applies to all sides of the element. If two values are defined, then the first value represents the top and bottom padding and the second represents the right and left padding. If three values are defined, the first value represents the top padding, the second represents the left and right, and the fourth represents the bottom padding. If four values are defined, they represent the top, right, bottom, and left, respectively.

Let’s take a look at examples defined by different padding values below.

See the Pen jOBXXRW by Christina Perricone (@hubspot) on CodePen.

CSS Border Style

The property specifies what kind of border to display.

The following values are allowed:

— Defines a dotted border
— Defines a dashed border
— Defines a solid border
— Defines a double border
— Defines a 3D grooved border. The effect depends on the border-color value
— Defines a 3D ridged border. The effect depends on the border-color value
— Defines a 3D inset border. The effect depends on the border-color value
— Defines a 3D outset border. The effect depends on the border-color value
— Defines no border
— Defines a hidden border

The property can have from one to four values (for
the top border, right border, bottom border, and the left border).

Example

Demonstration of the different border styles:

p.dotted {border-style: dotted;}p.dashed
{border-style: dashed;}p.solid {border-style: solid;}p.double
{border-style: double;}p.groove {border-style: groove;}p.ridge
{border-style: ridge;}p.inset {border-style: inset;}p.outset
{border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the
property is set!

❮ Previous
Next ❯

Rounded Border in CSS

The CSS border-radius property can be used to round the edges of a border. You can set this property using length values. The higher the value, the rounder the edges.

Like the border-style, border-width, border-color, and padding properties, the border-radius property can have between one and four values. If only one value is defined, then it applies to all sides of the element. If two values are defined, then the first value represents the top and bottom border edges and the second represents the right and left border edges. If three values are defined, the first value represents the top border edge, the second represents the left and right, and the fourth represents the bottom edge. If four values are defined, they represent the top, right, bottom, and left, respectively.

Let’s take a look at examples defined by different border-radius values below.

See the Pen Rounded Border in CSS by Christina Perricone (@hubspot) on CodePen.

To learn how else you can use this property in your website designs, check out How to Draw a Circle Using the CSS Border Radius Property.

Принципы хорошей архитектуры CSSСкопировать ссылку

CSS-сообществу редко удаётся прийти к договорённости, что и как нужно делать. Даже если взглянуть только на комментарии с Hacker News или на реакцию разработчиков на выход CSS Lint, станет ясно, что многие не согласны друг с другом даже по поводу самых базовых вещей, которые стоит или не стоит делать при разработке.

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

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

ПредсказуемостьСкопировать ссылку

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

Это вряд ли необходимо маленьким сайтам, которые редко изменяются, но для больших сайтов с десятками или сотнями страниц предсказуемый CSS необходим.

Повторное использованиеСкопировать ссылку

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

ПоддержкаСкопировать ссылку

Когда нужно добавить или изменить новые компоненты или возможности, это не должно приводить к рефакторингу существующего CSS. Добавление компонента А на страницу не должно своим появлением ломать компонент Б.

МасштабируемостьСкопировать ссылку

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

Итого

Сокращенная запись свойства , , записывается практически как наш алгоритм:

т.е., в переводе на человеческий: что за картинка — пробел — как ее резать — слеш — какой толщины делать рамку — слеш — насколько выдвигать ее за края — пробел — как натягивать «плитки». Части и необязательны. Что именно из них пропущено, определяется по количеству слешей перед оставшимся. Например, в значение 25px — это толщина рамки (до него один слеш), а в — это выступ за края (до него два слеша). Но «что резать», «как резать» и «как растягивать» указывать нужно (первое — по стандарту, остальное — по здравому смыслу).

Cледующий пример — набросок своего рода «песочницы» для этого свойства. Пробуйте загружать или задавать кодом свои картинки и градиенты, менять значения и единицы, смотрите на результат и… копируйте итоговое значение. Надеюсь, из этого получится неплохое дополнение к старому доброму border-image.com:)

See the Pen Конструктор border-image by Ilya Streltsyn (@SelenIT) on CodePen.

И несколько слов о поддержке браузерами. С ней всё хорошо: полностью выпадает лишь IE10 и ниже. Без значения для , по-моему, жить можно.

Правда, на CanIUse есть загадочное примечание (про WebKit и Edge 13), которое чуть не сбило меня с толку: «Есть баг, что неправильно перекрывает ». Каково же было мое удивление, когда я обнаружил, что все браузеры «перекрывают» компоненты обычного -а по-разному! Safari в iOS 10 не рисует картинку при , Edge 14 — при , Хром (включая Canary 56) — при обоих. А вот Firefox (и IE11, что интересно) рисуют картинку несмотря ни на что, хотя о баге в них не сказано!

После раскопок в спецификациях и консультаций с умными людьми я выяснил, что поведение FIrefox (и IE11) правильное. Это подтверждают официальные тесты к спецификации. По стандарту, составляющие обычного не должны влиять на чем-либо еще, кроме как через дефолтное значение (причем его легко «отвязать», задав конкретное значение). Неразбериха возникла из-за двусмысленной фразы в спецификации, что «при нулевом рамка считается отсутствующей» (без уточнения, идет ли речь только об обычной или о картиночной тоже), а также из-за проблем совместимости со старыми префикснутыми реализациями и гугловским календарем:). Ради совместимости с Хромом, видимо, сломали и Edge. Впрочем, «лекарство» — явно указать, например, и ненулевой — элементарно. К тому же они наверняка всё равно понадобятся для изящной деградации.

И еще две хорошие новости и одна плохая. Хорошая №1 — работает в Опере Мини! Так что его поддержка чуть ли не лучше, чем у ). Хорошая №2 — на сегодня это единственный браузер, которому нужен префикс. И чуть ли не единственный случай, где это префикс . Даже префикс уже не актуален! А плохая новость в том, что Опера Мини поддерживает только сокращенное свойство целиком (нельзя задавать, скажем, и по раздельности) и не понимает в не только странного , но и полезного .