Как проверить процент использовать css свойств

Основные CSS свойства

Свойство color позволяет задать цвет текста. Цвет можно задавать следующими способами: английским словом, через решетку #, через rgb и некоторыми другими способами, которые мы пока не будем разбирать.

Давайте разберем указанные способы подробнее.

Способ первый — английское слово

Самый простой и понятный вариант задать цвет — указать его английским словом, например, red задает красный цвет, blueголубой, greenзеленый, blackчерный, whiteбелый (все названия цветов, которые можно использовать, смотрите тут: цвета CSS).

В следующем примере всем абзацам на странице задан красный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

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

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

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

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

Способ второй — через rgb

Суть этого способа заключается в следующем — для свойства color я пишу следующее значение — rgb(красный, зеленый, голубой) — и указываю в каких пропорциях нужно брать эти три базовых цвета. Сами цвета могут изменяться от 0 до 255. Причем ноль — это отсутствие цвета, а 255 — это чистый цвет (к примеру, чисто красный).

Сами буквы rgb расшифровываются как red (красный), green (зеленый), blue (голубой).

Давайте смешаем чисто красный и чисто зеленый цвет. Для этого первое значение ставим в 255, второе тоже в 255, а третье — в ноль, так как примесь голубого нам не нужна. У нас получится чисто желтый цвет (я поставил голубой фон блоку, так как желтый цвет на белом режет глаза):

Так код будет выглядеть в браузере:

Абзац с текстом.

А вот так мы получим чисто красный цвет (первое значение в 255, а все остальные нули):

Так код будет выглядеть в браузере:

Абзац с текстом.

Так получим чисто зеленый цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

А вот так — частично зеленый (я поставил не 255, а 100 для зеленого):

Так код будет выглядеть в браузере:

Абзац с текстом.

Ну, а теперь я смешаю все три цвета в произвольных пропорциях. Смотрите, что получилось:

Так код будет выглядеть в браузере:

Абзац с текстом.

Если я поставлю все значения в 255, то получу чистый белый цвет, а если все нули — чистый черный.

Чисто белый цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

Чисто черный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

Способ третий — через #

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

Чтобы понять суть этого способа, вам нужно разобраться с шестнадцатеричной системой счисления. В ней, в отличии от десятичной, который мы с вами пользуемся не 10 цифр, а 16: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F — как вы видите, за недостатком цифр после девяти используются буквы. Преимущество шестнадцатеричной системы в том, что число 255 (и менее) можно представить всего двумя символами — FF соответствует 255 и так далее.

В этой системе вместо rgb() записывается решетка #, после которой идут 6 знаков. Первые 2 знака — красный цвет, вторые два знака — зеленый, и последние два знака — голубой. Цвета также изменяются от 0 до 255, но в шестнадцатеричной системе это будет от 00 до FF.

К примеру, запись rgb(255, 200, 255) можно представить как #FFC8FF — это будет более компактно.

В следующем примере абзац красится в красный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

Мы уже разбирали, что rgb(0, 0, 0) соответствует черному цвету, а значит #000000 — тоже черный цвет, а rgb(255, 255, 255) — белый и #FFFFFF — тоже белый.

Кроме того, существует сокращенная форма записи — к примеру, #FEDFED можно переписать как #FED — то есть, если первая половина записи совпадает со второй половиной — то ее (вторую половину) можно не писать. В сокращенном варианте черный цвет будет #000, а белый — #FFF.

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

Видео по работе с пипеткой

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

Тут скоро будет видео по работе с пипеткой.

Блок . Свойства width и height — ширина и высота

Свойства width и height позволяют задать высоту и ширину элементу соответственно. Ширина и высота обычно измеряются в пикселях (обозначается px) или процентах (обозначается %) (можно измерять и других единицах, которые мы пока не будем разбирать).

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

Если задавать размеры в процентах — то эти проценты вычисляются относительно родительского элемента.

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

Так код будет выглядеть в браузере:

Видео по работе с измерительными инструментами

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

Как ими пользоваться, смотрите в следующем видео:

Тут скоро будет видео по работе с измерителем пикселей.

Блок . Свойство text-align — выравнивание текста

Свойство text-align позволяет задать выравнивание текста. Текст можно выравнять по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому, и по левому краю (значение justify).

Давайте посмотрим на примерах, что имеется ввиду.

Значение left

Давайте сделаем так, чтобы текст был выровнен по левому краю. Для этого нужно свойство text-align поставить в значение left:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

В принципе, для абзацев значение left можно и не ставить — они по умолчанию и так выровнены по левому краю. Однако есть элементы, которые по умолчанию стоят по центру (это, например, теги th, которые делают ячейку-заголовок таблицы). И вот для них как раз-таки и может потребоваться выравнивание по левой стороне.

Значение right

Давайте теперь поставим текст по правому краю:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Значение center

Поставим текст по центру:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Значение justify

Ну, и наконец выровняем текст одновременно и по правому, и по левому краю:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Блок . Свойство font-weight — жирность

Свойство font-weight позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует добавить значение bold, а чтобы отменить жирность — значение normal.

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

Если бы я делал жирный через тег <b> — мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам — мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).

В следующем примере мы сделаем все абзацы жирными, а все заголовки h3 — нежирными:

Так код будет выглядеть в браузере:

Это заголовок

Абзац с текстом.

Для сравнения привожу их вид по умолчанию:

Это заголовок

Абзац с текстом.

Блок . Свойство font-style — курсив

Свойство font-style позволяет сделать текст курсивным или наоборот — отменить курсив. Чтобы сделать текст курсивом, следует добавить значение italic, а чтобы отменить курсив — значение normal. Смотрите пример:

Так код будет выглядеть в браузере:

Абзац с текстом.

Блок . Свойство font-size — размер текста

Свойство font-size позволяет задать размер текста. Размер задается в пикселях (обозначаются px), в пунктах (обозначаются pt), в процентах (обозначаются %) и с помощью некоторых других единиц, которые мы пока не будем разбирать.

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

Значение в пунктах

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

Между пунктами и пикселями есть соответствие: 12pt = 16px. При этом все размеры на экране на самом деле меряются в пикселях, даже если вы задаете их в пунктах. При этом, если после перевода пунктов в пиксели, полученные пиксели будут дробными — они округлятся до ближайшего целого.

Давайте зададим тексту абзаца шрифт в 20 пунктов:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

Значение в процентах

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

Блок . Свойство font-family — тип шрифта

Свойство font-family позволяет задать тип шрифта (тип часто называют семейством шрифта).

Поставим для всех абзацев шрифт Arial:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

Также для решения данной проблемы поступают так: перечисляют несколько похожих шрифтов через запятую. Например, font-family: Georgia, "Times New Roman".

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

Заканчивают список обычно ключевым словом, которое описывает тип шрифта (все шрифты относятся к какому-нибудь типу) — serif, sans-serif, cursive, fantasy или monospace. Если браузер не нашел ни одного из указанных шрифтов на компьютере пользователя, то он выберет один из шрифтов указанного типа.

Шрифты бывают с засечками serif и без засечек sans-serif. Засечки — это специальные штрихи на концах букв (выделены красным):

Засечки являются отличительной особенностью шрифта, нет такого, чтобы был одновременно с засечками и без засечек. Arial с засечками будет уже какой-то другой шрифт, но никак не Arial.

Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

Веб безопасные шрифты

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

Значение Описание
Arial Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Arial Black Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Comic Sans MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Courier New Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Georgia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Impact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Times New Roman Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Trebuchet MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Verdana Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.

Свойство line-height — межстрочный интервал

Свойство line-height задает межстрочный интервал.

Межстрочный интервал — это расстояние между линиями текста, то есть белый промежуток между ними.

При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.

Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-heightfont-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.

В данном примере расстояние между строками текста будет line-height — font-size = 50px — 13px = 37px:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Значением свойства line-height не обязательно должно служить число в некоторых единицах. Можно также просто написать число или дробь. В этом случае настоящее значение line-height можно будет найти, умножив его на значение font-size.

К примеру, font-size равен 10px, а line-height1.5. В этом случае реальное значение line-height будет 10px * 1.5 = 15px. Ну, а видимый белый промежуток между линиями текста будет 5px: line-height — font-size = 15px — 10px = 5px.

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

Блок . Свойство font — сокращение для шрифтов

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

Свойство font имеет следующий синтаксис: курсив жирность размер_шрифта/интервал_между_строками семейство_шрифта. Обязательными являются "размер_шрифта" и "семейство_шрифта", порядок имеет значение.

Свойство font является свойством-сокращением.

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Блок . Свойство text-indent — красная строка

Свойство text-indent позволяет задать красную строку, то есть отступ первой строки текста (к примеру, в абзаце).

Давайте сделаем красную строку для абзацев:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Блок . Свойство vertical-align

Свойство vertical-align позволяет задать выравнивание по вертикали. К сожалению, адекватным образом это выравнивание работает только для таблиц.

Значение top выравнивает по верхнему краю, значение bottom — по нижнему, а middle — по центру по вертикали (есть еще некоторые другие значения, они нас пока не интересуют).

Значение top

Давайте сделаем так, чтобы по вертикали текст в ячейках таблицы был выровнен по верхнему краю:

Основные css-свойства – что нужно знать при работе с css

Основные css-свойства – что нужно знать при работе с css

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

Что нужно знать для начала

Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:

Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Стили для текстового содержимого

Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: Размер шрифта в html, Как задать цвет шрифта в html, Как задать шрифт в html.

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

Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.

Отображение на экране

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

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

Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)

Inline- преобразование в строчный элемент.

Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).

Table &#8212; преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)

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

Опять же, это не все значения, только самые основные.

Свойства размера

Блоки играют основную роль в создании сайта. Им нужно прописывать определенные размеры, это указывается с помощью таких свойств:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.

Также на размеры блочных элементов могут повлиять дополнительные параметры. Например, внутренние отступы. Они задаются с помощью слова padding и значения в пикселях (но можно и в другой величине). Если нужно задать отступ только для одной стороны, можно указать это, дописав к padding- через дефис нужную сторону (left, right и т.д.)

Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:

Как узнать поддерживает ли браузер HTML/CSS свойства?

Частенько бывает, что необходимо уточнить, какой процент браузеров поддерживает то или иное CSS свойство или HTML элемент. Дать ответ в такой ситуации поможет отличный online сервис.

caniuse-mainpage

Знакомьтесь &#8211; мощный онлайн помощник, в вопросе поддержки браузерами CSS/CSS3 свойств и HTML/HTML5 элементов:

Как узнать поддерживает ли браузер HTML/CSS свойство?

support

Узнать поддерживает браузер нужное вам свойство &#8211; очень просто, достаточно вбить его в поиск:

В скрине выше я вбил тег HTML5 article и мгновенно получил график поддержки данного тега, разными версиями браузеров. Все наглядно и очень просто &#128578;

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

settings

У этого сервиса есть очень полезные настройки:

1. Отсеять браузеры по % использования, т.е. если браузером пользуются менее 1% людей, вы можете не учитывать его особенности при разработке своего проекта.
2. Очень полезная опция по выбору региона, так вы можете узнать процент людей, браузеры которых поддерживают выбранное вами CSS свойство или HTML элемент.
3. Также вы настроить набор браузеров, поддержка которых вас интересует.

Узнать поддержку CSS/CSS3 свойств

css-support

Используя все тот же поиск вы можете узнать какие браузеры поддерживаю введенное CSS/CSS3 свойство, увидеть статус работы над этим свойством и в какой версии языка CSS оно было введено.

Узнать % поддержку CSS/CSS3 и HTML/HTML5 определенной версией браузера в Вашем регионе

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

percent-support

Сравнение браузеров между собой

На этом сайте можно провести сравнение поддержки браузерами разных свойств, например вот так отличаются версии InternetExplorer`a между собой:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *