основы работы с операторами и условиями
От автора: сегодня расскажу, как работают в CSS if и for. Я продолжаю рассматривать CSS, как язык программирования. Вопрос, является ли он таковым или нет, в данный момент очень горячая тема, но мне не очень интересен ответ.
Вместо этого я хотел бы знать, может ли описание определенных структур CSS в терминах программирования помочь вам лучше или быстрее изучать CSS или это мешает. Другими словами, есть ли образовательная ценность в том, чтобы рассматривать CSS как язык программирования? Скажите, пожалуйста, является ли приведенное ниже объяснение полезным или запутанным для вас.
Оператор if
Область, где язык программирования CSS менее развит, чем JavaScript — это управляющие структуры — или так может показаться. Тем не менее, CSS имеет операторы if. Вот несколько примеров:
@media all and (max-width: 900px) { } @supports (display: flex) { }
@media all and (max-width: 900px) {
} @supports (display: flex) {
} |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееОни означают «если область просмотра макета имеет максимальную ширину 900 пикселей» и «если движок CSS принимает» display: flex. Нет сомнений в том, что это фактические операторы if: блоки кода применяются только в том случае, если удовлетворяется условие. (Кроме того, спецификация для @media и @supports называется Условными правилами CSS. Это просто: at-правила должны использоваться как операторы if.)
Но давайте рассмотрим — если можно так выразиться — более сомнительный пример. Является ли следующее также оператором if?
«Если в меню есть ссылка, выделить ее красным цветом». Несколько человек, у которых я брал интервью для книги, были убеждены в том, что селекторы — это тоже операторы.
Вы согласны? Согласен ли я? Я не уверен, хотя и вижу в этом определенный смысл: можно рассматривать селекторы и так. Согласны ли вы с этим, вероятно, зависит от вашего определения оператора if.
Цикл for
Давайте для рассмотрения циклов немного усложним ситуацию. На первый взгляд может показаться, что в CSS их нет. Тем не менее, как насчет того же кода, который мы видели выше?
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ некотором смысле, селектор, подобный приведенному выше, можно считать примитивным циклом for. Браузеру велено перебрать все элементы <a> внутри элемента <menu> и применить к ним красный цвет.
Является ли селектор циклом for? Может ли он быть оператором if и циклом for одновременно? Опять же, это зависит от ваших определений циклов for и операторов if. Я хотел бы отметить, что можно добавить в CSS дополнительную логику для циклов.
menu a:first-child { color: blue; } menu a:not(#current) { color: red; }
menu a:first-child { color: blue; }
menu a:not(#current) { color: red; } |
Эти дополнительные селекторы можно рассматривать как операторы внутри цикла for: перебрать все ссылки в меню, но пропустить эту одну и назначить для нее специальный режим.
Декларативный и императивный подходы
Давайте возьмем самое общее представление и скажем, что CSS-селекторы могут рассматриваться как операторы if и как циклы for. Это будет звучать довольно странно для любого, кто имеет опыт работы с JavaScript, поскольку эти два типа управляющих структур просто не одинаковы. Итак, как вы можете заменить оба на одну структуру?
Здесь, я думаю, мы еще раз видим, что CSS является декларативным языком, а не императивным. В декларативных языках некоторые простые управляющие структуры могут быть выражены гораздо более кратко, чем в императивных. Возьмем последний пример кода. В JavaScript мы должны написать что-то вроде:
for (all menus) { for (all links in this menu) { let first = [figure out if this is the first link in the menu] if (first) { link.color = ‘blue’ } else if (link.id !== ‘current’) { link.color = ‘red’; } } }
for (all menus) { for (all links in this menu) { let first = [figure out if this is the first link in the menu] if (first) { link.color = ‘blue’ } else if (link.id !== ‘current’) { link.color = ‘red’; } } } |
Недостатком версии JavaScript является то, что она более многословна, чем версия CSS, и, следовательно, более подвержена ошибкам. Преимущество ее состоит в том, что она предоставляет более тонкий контроль, чем CSS. В CSS мы почти достигли пределов того, что мы можем выразить. В версию JavaScript мы могли бы добавить гораздо больше логики, если пожелаем.
В CSS мы сообщаем браузеру, как должны выглядеть ссылки. В JavaScript мы описываем алгоритм для определения того, как должна выглядеть отдельная ссылка. Ни то, ни другое не является единственно правильным, но в этом примере способ CSS является более эффективным.
Лично мне комфортно рассматривать CSS-селекторы как операторы и циклы одновременно. Тем не менее, я чувствую, что как только вы начинаете понимать CSS, тот факт, что селекторы представляют собой if / for, становится все менее и менее актуальным. Вместо этого селекторы — просто селекторы: отлично подходят для относительно простых объявлений; меньше для очень сложных.
Полезно это или сбивает с толку?
Если вы джаваскриптер, который желает лучше узнать CSS, я хотел бы услышать, помогают или сбивают вас с толку несколько приведенных выше примеров. Чем больше отзывов я получаю, тем лучше я могу написать книгу, которая поможет вам изучить CSS, а не просто запутает вас. Благодарю за внимание.
Источник: https://www.quirksmode.org
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть30 CSS-селекторов, о которых полезно помнить
- Главная
- ->
- Материалы
- ->
- 30 CSS-селекторов, о которых полезно помнить
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Перейти на сайт->
Бесплатный Курс «Практика HTML5 и CSS3»
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Начать->
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Получить в подарок->
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
Получить в подарок->
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
30 CSS-селекторов, о которых полезно помнить
Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.
Несмотря на то, что многие из упомянутых здесь селекторов входят в спецификацию CSS3 и, соответственно, поддерживаются только современными браузерами, Вам все же следует ознакомиться с ними и держать их в памяти.
1. *
* {
margin: 0;
padding: 0;
}
Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.
Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.
Также символ * можно использовать для дочерних элементов объекта.
#container * {
border: 1px solid black;
}
Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.
Совместимость:
* Firefox
* Chrome
* Safari
* Opera
2. #X
#container {
width: 960px;
margin: auto;
}
Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.
«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»
Селекторы id негибки и их трудно использовать повторно в разных проектах. Если возможно, пытайтесь сначала использовать имя тэга или даже псевдо-класс.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
3. .X
.error {
color: red;
}
Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.
В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
4. X Y
li a {
text-decoration: none;
}
Следующий часто используемый тип селектора — селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.
К примеру, как быть, если нужно выбрать не все тэги ссылок, а только те, что находятся внутри неупорядоченного списка? Это как раз тот случай, когда следует использовать селектор потомка.
«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
5. X
a {color: red;}
ul {margin-left: 0px;}
Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
6. X:visited и X:link
a:link {color: red;}
a:visited {color: purple;}
Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.
Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
7. X + Y
ul + p {
color: red;
}
Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
8. X > Y
#container > ul {
border: 1px solid black;
}
Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:
<div>
<ul>
<li>Элемент списка
<ul>
<li>Потомок</li>
</ul>
</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</div>
Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
9. X ~ Y
ul ~ p {
color: red;
}
Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.
В нашем случае он отберет все элементы p, следующие за элементом ul.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
10. X[title]
a[title] {
color: green;
}
Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
11. X[href=»foo»]
a[href="http://www.codeharmony.ru"] {
color: red;
}
Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.
Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
12. X[href*=»codeharmony»]
a[href*="codeharmony"] {
color: red;
}
Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
13. X[href^=»http»]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные «напоминалки» пользователю о том, что ссылка ведет на другой сайт.
Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.
«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
14. X[href$=».jpg»]
a[href$=".jpg"] {
color: red;
}
И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
15. X[data-*=»foo»]
a[data-filetype="image"] {
color: red;
}
Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.
<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>
Поступив таким образом, мы можем использовать код данного примера:
a[data-filetype="image"] {
color: red;
}
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
16. X[foo~=»bar»]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.
<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>
Используя данный прием мы можем делать выборки с нужными нам комбинациями:
/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
color: red;
}
/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
border: 1px solid black;
}
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
17. X:checked
input[type=radio]:checked {
border: 1px solid black;
}
Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
18. X:after
Данный псевдо-класс позволяет сгенерировать контент вокруг выбранного элемента.
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.
Совместимость:
* IE8+
* Firefox
* Chrome
* Safari
* Opera
19. X:hover
div:hover {
background: #e3e3e3;
}
Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!
«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»
Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:
a:hover {
border-bottom: 1px solid black;
}
«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»
Совместимость:
* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera
20. X:not(selector)
div:not(#container) {
color: blue;
}
Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блоки div, кроме одного с идентификатором container. Для этого отлично подойдет код выше.
Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:
*:not(p) {
color: green;
}
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
21. X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Псевдоэлементы можно использовать для придания стилей фрагменту элемента, например, первой строке или первой букве. Применяется только к блочным элементам.
Выбираем первую букву параграфа:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».
Выбираем первую строку параграфа:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!
В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).
Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
Иногда бывают ситуации, когда вместо того, чтобы выбирать определенных потомков, нужно сделать выбор по типу элемента.
Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
26. X:first-child
ul li:first-child {
border-top: none;
}
Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.
К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.
Для устранения этого недостатка можно использовать данный псевдо-класс.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
27. X:last-child
ul > li:last-child {
color: green;
}
В противоположность классу first-child, last-child выберет последний элемент родительского элемента.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
28. X:only-child
div p:only-child {
color: red;
}
Честно говоря, это довольно редко используемый псевдо-класс, но, тем не менее, он тоже бывает полезен. Он позволяет выбрать Вам те элементы, которые являются единственными потомками для своих родителей.
В нашем примере стиль будет применен только к параграфу, который является единственным потомком блока div.
Давайте рассмотрим для наглядности такую разметку:
<div><p>Здесь идет единственный в блоке параграф.</p></div> <div> <p>Здесь идет первый параграф в блоке.</p> <p>Здесь идет второй параграф в блоке.</p> </div>
В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.
Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ — использовать only-of-type.
ul > li:only-of-type {
font-weight: bold;
}
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
30. X:first-of-type
Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.
Чтобы лучше это понять, скопируйте в свой редактор следующий код:
<div>
<p>Здесь параграф.</p>
<ul>
<li>Элемент 1.</li>
<li>Элемент 2.</li>
</ul>
<ul>
<li>Элемент 3.</li>
<li>Элемент 4.</li>
</ul>
</div>
Сейчас, не читая дальше, попробуйте придать стиль только «элементу 2». Когда догадаетесь (либо сдадитесь), читайте дальше.
Решение 1
Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
Данный код гласит: «Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li.»
Решение 2
Другой вариант — воспользоваться смежным селектором:
p + ul li:last-child {
font-weight: bold;
}
Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.
Решение 3
Можно еще немного поиграть с селекторами и поступить таким образом:
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
Вывод
Если Вы все еще пишете код, принимая во внимание существование IE6, то Вам нужно быть предельно осторожным при использовании новых селекторов. Но не делайте из этого оправдания, не говорите, что Вам это не нужно знать — этим Вы осложните жизнь самому себе.
Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать «родные» CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.
Благодарю за внимание, надеюсь, Вы нашли для себя хотя бы пару-тройку полезных трюков.
По материалам www.net.tutsplus.com
Перевод — Дмитрий Науменко.
P.S. Уже верстаете сайты или планируете глубже освоить CSS? Посмотрите еще серию бесплатных видео по резиновой верстке и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
Наверх
условие if / else в CSS
Учитывая HTML-файл, и мы должны применить, используя условия if-else в CSS.
Нет, мы не можем использовать условия if-else в CSS, так как CSS не поддерживает логику. Но мы можем использовать некоторые альтернативы if-else, которые обсуждаются ниже:
Метод 1: В этом методе мы будем использовать классы в файле HTML для достижения этой цели. Мы будем определять разные имена классов в соответствии с условиями, которые мы хотим применить в CSS.
Таким образом, приведенные выше классы будут выполняться только для тегов HTML, в которых используются эти классы.
Пример:
|
Выход:
Способ 2. Мы можем использовать CSS-препроцессоры, такие как SASS, что позволяет нам писать в них операторы условия. Даже если вы используете SASS, вы должны предварительно обработать таблицы стилей, что означает, что условие оценивается во время компиляции, а не во время выполнения.
Синтаксис:
$type: line;
p {
@if $type == line1 {
color: blue;
} @else if $type == line2 {
color: red;
} @else if $type == line3 {
color: green;
} @else {
color: black;
}
}
Чтобы узнать больше о SASS, нажмите здесь
Чтобы прочитать о if-else в SASS, нажмите здесь
Рекомендуемые посты:
условие if / else в CSS
0.00 (0%) 0 votes
Условные правила CSS — это не что иное, как особенность CSS, в которой стиль CSS применяется на основе определенного условия. Таким образом, условие здесь может быть либо истинным, либо ложным, и в зависимости от утверждений / стиля будет выполнено.
Эти правила в конечном итоге подпадают под правило CSS, поскольку начинаются с @ .
Условные правила:
- @supports
- @СМИ
- @документ
@supports: Условное правило @supports должно проверять поддержку определенного свойства CSS в браузере и применять стили, основанные на этом.
Синтаксис:
@supports ("condition") {
/* Style to apply */
}
Пример:
|
Выход:
В приведенном выше примере браузер поддерживается свойством display в виде сетки.
@media: Условное правило @media — это правило, которое используется для применения стиля на основе медиазапросов. Он может использоваться для проверки ширины и / или высоты устройства и применения стиля, определенного на его основе.
Синтаксис:
@media screen and ("condition") {
/* Style to apply */
}
Пример:
|
Выход:
Ширина экрана более 700 пикселей:
Ширина экрана меньше или равна 700 пикселей:
В приведенном выше примере, когда ширина браузера превышает 700 пикселей, стиль не применяется, но когда окно браузера становится меньше 700 пикселей, стиль применяется.
@document: Условное правило @document используется для применения стиля к указанному URL-адресу, т. е. стиль будет применяться только к указанному URL-адресу.
Синтаксис:
@document url(“YOUR-URL”) {
/* Style to apply */
}
Он экспериментален и работает только в Firefox с префиксом -moz-, т.е. @ -moz-document .
Пример:
|
Выход:
В приведенном выше примере стиль применяется, когда указанный URL является посещаемым.
Рекомендуемые посты:
CSS | Условные правила
0.00 (0%) 0 votes
Продвинутые CSS-селекторы, о которых вы не знали
В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.
Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента (CSS или JavaScript) браузеру приходиться «обойти» весь DOM страницы, чтобы найти нужный.
При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class. Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.
($=) – атрибут оканчивается определенным значением
Выбор элемента с помощью CSS, значение которого заканчивается определенным символом (суффиксом) выглядит следующим образом:
div[id$=“_myDiv”] {
// CSS правило
}Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.
Пример:
<!-- HTML --> <div> Какой-то текст </div>
Чтобы выбрать этот элемент div, нужно использовать следующий селектор:
div[id$="_LoginPanel"] {
margin: 0 3em;
padding: 1em;
}Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:
div[id$=“myDynamicDiv”] {
// CSS правила
}Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).
(^=) — атрибут начинается с определенного значения
Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):
<!-- HTML --> <div> <h2>My custom panel</h2> </div>
Селектор будет выглядеть следующим образом:
div[class^="myPanel_"] {
// CSS правила
}Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.
(* =) — атрибут содержит некоторое значение
Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:
<div> <h2>Какой-то текст</h2> <form>...</form> </div>
Выбор этого элемента будет выглядеть следующим образом:
div[class*="logoutPanel"] {
// CSS правила
}Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.
(=) – атрибут со значением
Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:
<!-- HTML --> <div class=“3453_mydynamicdiv”> <h2>My Dynamic Div</h2> </div>
Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:
// 1-й способ – выбор конкретного элемента класса
div[class="3453_mydynamicdiv"] {
// CSS правила
}
// 2-й способ – выбор всех элементов класса
.3453_mydynamicdiv {
// CSS правила
}Краткий обзор селекторов атрибутов:
- = значение атрибута эквивалентно определённым символам;
- $= значение атрибута оканчивается определенными символами;
- ^= значение атрибута начинается с определенных символов;
- *= значение атрибута содержит определенные символы.
Перед тем, как задать параметры class в CSS, нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:
a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// вы понялиЭто удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.
Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:
<ul> <li>Blog</li> <li>About</li> <li>Videos</li> <li>Music</li> <li>Merch</li> </ul>
С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:
.nav li:not(.highlight) {
margin: 0 1em 0 0;
padding: 5px 16px;
display: inline-block;
}Можно пойти дальше и выбирать любые атрибуты.
Например:
В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:
p::first-letter {
// стиль буквы
}Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):
p:first-child::first-letter {
// добавляем стили только к первой букве первого абзаца текста
}Этот подход освобождает от необходимости использования JavaScript.
Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class:
article:first-of-type {
margin-top: 0;
}:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:
article:last-of-type {
border-bottom: none;
margin-bottom: 0;
}Вы познакомились с «продвинутыми» CSS class selector, о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.
Данная публикация представляет собой перевод статьи «Advanced CSS Selectors you never knew about» , подготовленной дружной командой проекта Интернет-технологии.ру
Условия в CSS
Условия в CSS2012-12-26 css media if
Условия в CSS они же медиа запросы (CSS media queries), используются для переключения/подключения CSS в зависимости от некоторых условий (свойств аппаратуры), часто применяются в css фреймворках.
Пример использования:
@media screen and (min-width: 1024px) {
#sidebar { width: 220px; }
}
@media screen and (max-width: 1023px) {
#sidebar { width: 110px; }
}
В данном примере условия работают для экранов мониторов (screen), и если ширина окна будет 1024px и более то будет активный 1-ый блок (=220px), если ширина окна будет 1023px и менее то будет активный 2-й блок (=110px).Пример использования условий при подключении css файла:
<link rel="stylesheet" media="all and (min-device-width: 600)" href="/style.css" />
Некоторые из параметров:
| min-width, max-width | Минимальная/максимальная ширина окна |
| min-height, max-height | Минимальная/максимальная высота окна |
| min-device-width, max-device-width | Минимальная/максимальная ширина экрана |
| min-device-height, max-device-height | Минимальная/максимальная высота экрана |
Условия по девайсам:
| all | Любые устройства |
| screen | Экраны мониторов |
| Принтеры | |
| handheld | Смарфоны и аналоги |
| tv | Телевизоры |
| projection | Проекторы |
Совместимость
Эта возможность появилась в CSS3, работает в:Chrome, Firefox 3.6+, Safari 4+, Opera 10, IE 9+, Android 2+, iOS 2+
О других свойствах можно прочитать тут developer.mozilla.org
30 селекторов CSS, которые нужно запомнить
От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.
1.*
* { margin: 0; padding: 0; }
* { margin: 0; padding: 0; } |
Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.
Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЗвездочку * также можно использовать для дочерних селекторов.
#container * { border: 1px solid black; }
#container * { border: 1px solid black; } |
Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.
Просмотреть DEMO.
Совместимость
IE6+
Firefox
Chrome
Safari
Opera
2. #X
#container { width: 960px; margin: auto; }
#container { width: 960px; margin: auto; } |
Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.
Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?
Селекторы id неподатливы и не позволяют повторного использования. Если возможно, сначала попробуйте использовать имя тэга, один из новых элементов HTML5, или даже псевдокласс.
Просмотреть DEMO.
Совместимость
IE6+
Firefox
Chrome
Safari
Opera
3. .X
Это — селектор class. Разница между id и class’ами в том, что при помощи последнего вы можете выбирать множественные элементы. Используйте class’ы, когда хотите применить стили к группе элементов. В качестве альтернативы используйте id для нахождения иголки в стогу сена и примените стиль к одному отдельному элементу.
Просмотреть DEMO.
Совместимость
IE6+
Firefox
Chrome
Safari
Opera
4. X Y
li a { text-decoration: none; }
li a { text-decoration: none; } |
Следующий наиболее комментируемый селектор — потомок. Пользуйтесь им, когда к своим селекторам нужно отнестись более конкретно. Например, что делать, если нежели выбирать все тэги-привязки all, лучше было бы сделать своей целью привязки внутри неупорядоченного списка? Вот когда вы определенно воспользовались бы наследованием селекторов.
Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.
Просмотреть DEMO.
Совместимость
IE6+
Firefox
Chrome
Safari
Opera
5. X
a { color: red; } ul { margin-left: 0; }
a { color: red; } ul { margin-left: 0; } |
Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul {}.
Просмотреть DEMO.
Совместимость
IE6+
Firefox
Chrome
Safari
Opera
6. X:visited and X:link
Для выборки всех тэгов-привязок, на которые еще нужно щелкнуть, мы пользуемся псевдоклассом :link.
Как альтернатива, у нас имеется псевдокласс :visited, который, как подразумевается, позволяет нам применять специальные стили только к тэгам-привязкам на странице, по которой уже щелкнули, или которую посетили.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
7. X + Y
Эта запись указывает на смежный селектор. Будет отбираться только тот элемент, которому непосредственно предшествует шаблонный элемент. В данном случае первый абзац после каждого элемента ul будет иметь текст красного цвета.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
8. X>Y
div#container > ul { border: 1px solid black; }
div#container > ul { border: 1px solid black; } |
Разница между обычным X Y и X > Y состоит в том, что последний выберет только прямые дочерние элементы. Например, рассмотрите следующую разметку.
<div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>
<div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> |
Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.
По этой причине преимущества производительности имеются в использовании дочернего комбинатора. Собственно, он чрезвычайно рекомендуется при работе с движками селекторов CSS, основанных на JavaScript.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
9. X ~ Y
Этот комбинатор находит одноуровневые узлы и идентичен X + Y, однако он менее строгий. В то время как смежный селектор (ul + p) выберет только первый элемент, которому непосредственно предшествует шаблонный элемент, этот селектор более общий. В вышеприведенном примере, он будет выбирать любые элементы p до тех пор, пока они следуют за ul.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
10. X[title]
a[title] { color: green; }
a[title] { color: green; } |
Относимый к селекторам атрибутов, в вышеприведенном примере он выберет только тэги-привязки, имеющие атрибут title. Тэги-привязки, не имеющие его, не получат этого конкретного стиля. А что, если вам нужен более специальный случай ? Что ж…
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
11. X[href=»foo»]
a[href=»http://net.tutsplus.com»] { color: #1f6053; /* nettuts green */ }
a[href=»http://net.tutsplus.com»] { color: #1f6053; /* nettuts green */ } |
Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на http://net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.
Обратите внимание, что мы заключаем значение в кавычки. Помните, что это также нужно делать при использовании движка селекторов JavaScript CSS. Предпочтительно перед неофициальными методами, всегда пользуйтесь селекторами CSS3, когда возможно.
Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
12. X[href*=»nettuts»]
a[href*=»tuts»] { color: #1f6053; /* nettuts green */ }
a[href*=»tuts»] { color: #1f6053; /* nettuts green */ } |
Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.
Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
13. X[href^=»http»]
a[href^=»http»] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
a[href^=»http»] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; } |
Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.
Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.
Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://.
Теперь, если бы нам было нужно вместо этого определить стиль всем привязкам, которые ссылаются на, скажем, фотографию? В этом случае давайте поищем конец строки.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
14. X[href$=».jpg»]
a[href$=».jpg»] { color: red; }
a[href$=».jpg»] { color: red; } |
И снова мы пользуемся знаком регулярных выражений, $, для обращения к концу строки. В этом случае мы ведем поиск всех привязок, ссылающихся на изображение — или, по крайней мере, url’а, оканчивающегося на .jpg. Помните, что это, скорее всего, не сработает с gif’ами и png.
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
15. X[data-*=»foo»]
a[data-filetype=»image»] { color: red; }
a[data-filetype=»image»] { color: red; } |
Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:
a[href$=».jpg»], a[href$=».jpeg»], a[href$=».png»], a[href$=».gif»] { color: red; }
a[href$=».jpg»], a[href$=».jpeg»], a[href$=».png»], a[href$=».gif»] { color: red; } |
Но так мы создаем себе головную боль и, к тому же, это неэффективно. Другое возможное решение – применение пользовательских атрибутов. Что получится, если добавить свой собственный атрибут data-filetype к каждой привязке, ссылающейся на изображение?
<a href=»path/to/image.jpg» data-filetype=»image»> Image Link </a>
<a href=»path/to/image.jpg» data-filetype=»image»> Image Link </a> |
Затем, при помощи этого готового к работе приема, можно употребить стандартный селектор атрибутов для выделения исключительно нужных привязок.
a[data-filetype=»image»] { color: red; }
a[data-filetype=»image»] { color: red; } |
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
16. X[foo~=»bar»]
a[data-info~=»external»] { color: red; } a[data-info~=»image»] { border: 1px solid black; }
a[data-info~=»external»] { color: red; }
a[data-info~=»image»] { border: 1px solid black; } |
А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (~) позволяет выбрать своей целью атрибут со списком значений, разделенным пробелами.
Согласно вышеприведенному пользовательском атрибуту из номера пятнадцать мы могли бы создать атрибут data-info, который может получить разделенный пробелами список чего угодно, что нужно пометить. В этом случае мы отметим внешние ссылки и ссылки на изображения — просто для примера.
<a href=»path/to/image.jpg» data-info=»external image»> Click Me, Fool </a>
<a href=»path/to/image.jpg» data-info=»external image»> Click Me, Fool </a> |
При помощи готовой к работе разметки мы теперь можем выбрать любые тэги с любыми из этих значений, используя прием селектора атрибутов ~.
/* Target data-info attr that contains the value «external» */ a[data-info~=»external»] { color: red; } /* And which contain the value «image» */ a[data-info~=»image»] { border: 1px solid black; }
/* Target data-info attr that contains the value «external» */ a[data-info~=»external»] { color: red; }
/* And which contain the value «image» */ a[data-info~=»image»] { border: 1px solid black; } |
Просмотреть DEMO.
Совместимость
IE7+
Firefox
Chrome
Safari
Opera
17. X:checked
input[type=radio]:checked { border: 1px solid black; }
input[type=radio]:checked { border: 1px solid black; } |
Этот псевдокласс выберет только проверенный элемент пользовательского интерфейса – как кнопка радио или checkbox (прямоугольник для пометки выбранного режима, состояния или действия (на экране дисплея)). Просто, как дважды два.
Просмотреть DEMO.
Совместимость
IE9+
Firefox
Chrome
Safari
Opera
18. X:after
Псевдоэлементы before и after соединяют все. Кажется, каждый день находятся новые творческие приемы их эффективного использования. Они просто формируют содержимое вокруг выбранного элемента.
Многие познакомились с этими классами при первой встрече с хаком clear-fix.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.clearfix:after { content: «»; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
.clearfix:after { content: «»; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }
.clearfix { *display: inline-block; _height: 1%; } |
Этот хак использует псевдоэлемент :after для присоединения пробела после элемента, а затем его очистки. Этот великолепный прием стоит иметь в своем инструментарии, особенно в тех случаях, когда невозможно использовать метод overflow: hidden;.
Согласно спецификации селекторов CSS3 технически вы должны использовать синтаксис псевдоэлемента из двух двоеточий ::. Однако, чтобы остаться сочетаемым, агент пользователя точно так же примет использование и одного двоеточия.
Совместимость
IE8+
Firefox
Chrome
Safari
Opera
19. X:hover
div:hover { background: #e3e3e3; }
div:hover { background: #e3e3e3; } |
Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!
Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.
Чаще всего мы используем этот селектор при применении к тэгам-привязкам, например, border-bottom , когда над ними проводят мышью.
a:hover { border-bottom: 1px solid black; }
a:hover { border-bottom: 1px solid black; } |
Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.
Совместимость
IE6+
Firefox
Chrome
Safari
Opera
20. X:not(selector)
div:not(#container) { color: blue; }
div:not(#container) { color: blue; } |
Псевдокласс отрицания чрезвычайно полезен. Скажем, я хочу выбрать все div’ы, кроме одного, который является id container. Фрагмент выше выполнит эту работу идеально.
Или, если бы я хотел выбрать каждый отдельный элемент (не советую), кроме тэгов абзаца, можно было бы сделать:
*:not(p) { color: green; }
*:not(p) { color: green; } |
Просмотреть DEMO.
Совместимость
IE9+
Firefox
Chrome
Safari
Opera
21. X::pseudoElement
p::first-line { font-weight: bold; font-size: 1.2em; }
p::first-line { font-weight: bold; font-size: 1.2em; } |
Можно использовать псевдоэлементы (назначенные ::) для назначения стилей фрагментам элемента, таким, как первая строка или первая буква. Помните о том, что для того, чтобы оказать эффект, они должны быть применены для блочных элементов.
Псевдоэлемент состоит из двух двоеточий: ::
Выберите первую букву абзаца
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } |
Этот отрывок – выделение, которое найдет все абзацы на странице, а затем довыберет только первую букву этого элемента.
Чаще всего оно используется для создания «газетных» стилей для первой буквы абзаца.
p::first-line { font-weight: bold; font-size: 1.2em; }
p::first-line { font-weight: bold; font-size: 1.2em; } |
Подобным образом псевдоэлемент ::first-line, как от него и ожидается, назначит стили только первой строке элемента.
«Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник
Просмотреть DEMO.
Совместимость
IE6
Firefox
Chrome
Safari
Opera
22. X:nth-child(n)
li:nth-child(3) { color: red; }
li:nth-child(3) { color: red; } |
Помните время, когда у нас не имелось возможности выделять отдельные элементы в стеке? Псевдокласс nth-child решает эту проблему!
Пожалуйста, обратите внимание, что nth-child принимает в качестве параметра целое число, однако, оно не начинается с нуля. Если хотите выбрать второй пункт списка, пользуйтесь li:nth-child(2).
Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.
Просмотреть DEMO.
Совместимость
IE9+
Firefox
Chrome
Safari
Opera
23. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
li:nth-last-child(2) { color: red; } |
Что получится, если бы у вас был огромный список пунктов в ul, и вам нужно было всего лишь обратиться, скажем, к третьему от конца пункту? Помимо выполнения li:nth-child(397), вы могли бы вместо этого применить псевдокласс nth-last-child.
Эта техника работает почти так же, как вышеуказанный номер шестнадцать, тем не менее, разница состоит в том, что она начинается с конца совокупности и работает в обратную сторону.
Просмотреть DEMO.
Совместимость
IE9+
Firefox
Chrome
Safari
Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
ul:nth-of-type(3) { border: 1px solid black; } |
Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.
Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.
Просмотреть DEMO.
Совместимость
IE9+
Firefox
Chrome
Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
ul:nth-last-of-type(3) { border: 1px solid black; } |
Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.
Совместимость
IE9+
Firefox
Chrome
Safari
Opera
26. X:first-child
ul li:first-child { border-top: none; }
ul li:first-child { border-top: none; } |
Этот структурный псевдокласс позволяет нам выбрать только первый дочерний элемент своего родителя. Вы его будете часто использовать для удаления рамок с первого и последнего пунктов списка.
Например, скажем, у вас есть список строк, и каждый из них содержит border-top и border-bottom. При таком размещении первый и последний пункт в этом наборе будут выглядеть немного странно.
Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.
Просмотреть DEMO.
Совместимость
IE7
Firefox
Chrome
Safari
Opera
27. X:last-child
ul > li:last-child { color: green; }
ul > li:last-child { color: green; } |
В противоположность first-child, last-child выделит последний пункт родителя элемента.
Пример
Давайте построим простой пример для демонстрации одного из возможных способов использования этих классов. Создадим элемент списка, имеющий стили.
Разметка
<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>
<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> |
Здесь нет ничего особенного; всего лишь простой список.
CSS
ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0; } li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c; }
ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0; }
li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c; } |
Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.
Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.
Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.
li:first-child { border-top: none; } li:last-child { border-bottom: none; }
li:first-child { border-top: none; }
li:last-child { border-bottom: none; } |
Вот так; все исправлено!
Просмотреть DEMO.
Совместимость
IE9+
Firefox
Chrome
Safari
Opera
Ага … IE8 поддерживал :first-child , но не:last-child. Поди разберись!
28. X:only-child
div p:only-child { color: red; }
div p:only-child { color: red; } |
Честно говоря, вы, вероятно, не слишком часто застанете себя за использованием псевдокласса only-child. Несмотря на все, если он понадобится, то вполне доступен.
Он позволяет выбирать элементы, являющиеся единственным дочерним у родителя. Например, касаемо фрагмента вверху, красным цветом будет окрашен только абзац, который является единственным дочерним элементом div’а.
Давайте представим следующую разметку.
<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>
<div><p> My paragraph here. </p></div>
<div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div> |
В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.
Просмотреть DEMO.
Совместимость
IE9+
Firefox
Chrome
Safari
Opera
29. X:only-of-type
li:only-of-type { font-weight: bold; }
li:only-of-type { font-weight: bold; } |
Этот структурный псевдокласс может использоваться несколькими хитрыми способами. Он выберет элементы, не имеющие сиблингов (элементов одного уровня) в своем родительском контейнере. В качестве примера давайте выберем все ul’ы, имеющие всего один пункт списка.
Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.
ul > li:only-of-type { font-weight: bold; }
ul > li:only-of-type { font-weight: bold; } |
Просмотреть DEMO.
Совместимость
IE9+
Firefox 3.5+
Chrome
Safari
Opera
30. X:first-of-type
Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.
Проверка
Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:
@media | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 6 | Opera Полная поддержка 9.2 | Safari Полная поддержка 1.3 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
any-hover медиа-функция | Chrome Полная поддержка 41 | Edge Полная поддержка 16 | Firefox Полная поддержка 64 | IE Нет поддержки № | Opera Полная поддержка 28 | Safari Полная поддержка 9 | WebView Android Полная поддержка 41 | Chrome Android Полная поддержка 41 | Firefox Android Полная поддержка 64 | Opera Android Полная поддержка 28 | Safari iOS Полная поддержка 9 | Samsung Интернет Android Полная поддержка 5.0 |
any-pointer медиа-функция | Chrome Полная поддержка 41 | Edge Полная поддержка 12 | Firefox Полная поддержка 64 | IE Нет поддержки № | Opera Полная поддержка 28 | Safari Полная поддержка 9 | WebView Android Полная поддержка 41 | Chrome Android Полная поддержка 41 | Firefox Android Полная поддержка 64 | Opera Android Полная поддержка 28 | Safari iOS Полная поддержка 9 | Samsung Интернет Android Полная поддержка 4.0 |
формат изображения медиа функция | Chrome Полная поддержка 3 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.5 | IE Полная поддержка 9 | Opera Полная поддержка 10 | Safari Полная поддержка 5 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 4.2 | Samsung Интернет Android Полная поддержка 1.0 |
calc () выражений | Chrome Полная поддержка 66 | Edge Полная поддержка 79 | Firefox Полная поддержка 59 | IE Нет поддержки № | Opera Полная поддержка 53 | Safari Полная поддержка 12 | WebView Android Полная поддержка 66 | Chrome Android Полная поддержка 66 | Firefox Android Полная поддержка 59 | Opera Android Полная поддержка 47 | Safari iOS Полная поддержка 12 | Samsung Интернет Android Полная поддержка 9.0 |
цвет медиа функция | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 2 | IE Полная поддержка 9 | Opera Полная поддержка 10 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
Цветовая гамма Медиа-функция | Chrome Полная поддержка 58 | Edge Полная поддержка 79 | Firefox Нет поддержки № | IE Нет поддержки № | Opera Полная поддержка 45 | Safari Полная поддержка 10 | WebView Android Полная поддержка 58 | Chrome Android Полная поддержка 58 | Firefox Android Нет поддержки № | Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 10 | Samsung Интернет Android Полная поддержка 7.0 |
цветовой индекс медиа функция | Chrome Полная поддержка 29 | Edge Полная поддержка 79 | Firefox Нет поддержки № | IE Нет поддержки № | Opera Полная поддержка 16 | Safari Полная поддержка 8 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 29 | Firefox Android Нет поддержки № | Opera Android Полная поддержка 16 | Safari iOS Полная поддержка 8 | Samsung Интернет Android Полная поддержка 2.0 |
соотношение сторон устройства мультимедийная функция | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 2 | IE Полная поддержка 9 | Opera Полная поддержка 10 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
высота устройства медиа функция | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 2 | IE Полная поддержка 9 | Opera Полная поддержка 10 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
ширина устройства медиа функция | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 2 | IE Полная поддержка 9 | Opera Полная поддержка 10 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
Режим отображения Медиа-функция | Chrome Полная поддержка 45 | Edge Полная поддержка 79 | Firefox Полная поддержка 47
| IE Нет поддержки № | Opera Полная поддержка 32 | Safari Полная поддержка 13 | WebView Android Полная поддержка 45 | Chrome Android Полная поддержка 45 | Firefox Android Полная поддержка 47
| Opera Android Полная поддержка 32 | Safari iOS Полная поддержка 13 | Samsung Интернет Android Полная поддержка 5.0 |
мультимедийная функция с принудительной печатью | Chrome Нет поддержки №
| Edge Нет поддержки №
| Firefox Нет поддержки № | IE Нет поддержки № | Opera Нет поддержки № | Safari Нет поддержки № | WebView Android Нет поддержки №
| Chrome Android Нет поддержки №
| Firefox Android Нет поддержки № | Opera Android Нет поддержки № | Safari iOS Нет поддержки № | Samsung Интернет Android Нет поддержки № |
сетка медиа функция | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 2 | IE Полная поддержка 10 | Opera Полная поддержка 10 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
высота медиа функция | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 2 | IE Полная поддержка 9 | Opera Полная поддержка 10 | Safari Полная поддержка 3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1.0 |
hover медиа-функция | Chrome Полная поддержка 38
| Edge Полная поддержка 12 | Firefox Полная поддержка 64 | IE Нет поддержки № | Opera Полная поддержка 28 | Safari Полная поддержка 9 | WebView Android Полная поддержка 38
| Chrome Android Полная поддержка 50 | Firefox Android Полная поддержка 64 | Opera Android Полная поддержка 28 | Safari iOS Полная поддержка 9 | Samsung Интернет Android Полная поддержка 5.0 |
перевернутые цвета мультимедийная функция | Chrome Нет поддержки № | Edge Нет поддержки № | Firefox Нет поддержки № | IE Нет поддержки № | Opera Нет поддержки № | Safari Полная поддержка 9.1 | WebView Android Нет поддержки № | Chrome Android Нет поддержки № | Firefox Android Нет поддержки № | Opera Android Нет поддержки № | Safari iOS Полная поддержка 10 | Samsung Интернет Android Нет поддержки № |
функция освещения уровня освещения | Chrome Нет поддержки |
Сайт не найден · GitHub Pages
Сайт не найден · GitHub PagesЗдесь нет сайта GitHub Pages.
Если вы пытаетесь опубликовать один, прочитайте полную документацию чтобы узнать, как настроить GitHub Pages для вашего хранилища, организации или учетной записи пользователя.
,CSS Эквивалент выражения «if»
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
условно-CSS | Использование
Введение
Несомненно, каждый веб-дизайнер и разработчик, который делал какие-либо попытки использовать CSS, столкнулся с ситуацией, когда разные веб-браузеры требуют разных утверждений стиля. Это раздражение связано с различной степенью полноты реализации CSS в разных браузерах и версиях браузера. Условно-CSS — это решение этой проблемы, основанное на идее условного синтаксиса комментариев из Internet Explorer и включающее его в свои операторы CSS.
Базовое использование
Основное использование Conditional-CSS состоит в том, чтобы указывать, следует ли отправлять конкретный оператор CSS конкретному браузеру или нет. Конечно, вы не захотите делать это часто, но это исключительно полезно, когда вам нужно настроить таргетинг на браузер. Таким образом, может поддерживаться очень широкий спектр веб-браузеров, что видно из списка, который мы поддерживаем в U4EA.
Любой оператор или блок CSS может иметь префикс условного оператора, из которых существует три основных типа:
- [если {!} Браузер]
- [if {!} Версия браузера]
- [if {!} Условие браузера версия]
где:
- ! — указывает на отрицание утверждения (т.е.е. НЕ) — опционально
- browser — указывает, на какой браузер нацелен оператор
- «IE» — Internet Explorer
- ‘Gecko’ — браузеры на базе Gecko (Firefox, Camino и т. Д.)
- ‘Webkit’ — браузеры на основе Webkit (Safari, Chrome, Shiira и т. Д.)
- ‘SafMob’ — мобильное сафари (iPhone / iPod Touch)
- «Опера» — браузер Opera
- ‘IEMac’ — Internet Explorer для Mac
- ‘Konq’ — Konqueror
- ‘IEmob’ — IE mobile
- ‘PSP’ — Playstation Portable
- ‘NetF’ — Net Front
- версия — какая версия браузера должна рассматриваться
- условие — арифметический оператор
- лт — менее
- lte — меньше или равно
- экв — равно
- gte — больше или равно
- GT — больше, чем
Несколько примеров условных операторов:
// Примеры синтаксиса условного CSS [if IE] — используется, если браузер IE [если ! Opera] — используется, если браузер не Opera [если IE 5] — используется, если браузер IE 5 [if lte IE 6] — используется, если браузер IE 6 или менее (IE 5, IE 4 и т. д.) [если ! gt IE 6] — тот же эффект, что и в предыдущем выражении, если не больше, чем IE 6В качестве более практического примера рассмотрим div класса box с шириной и отступом.Скажем также, что он должен работать в IE 5 (я понимаю, что большинство людей отказались от поддержки IE5, но это классический пример). Блочная модель IE 5 нестандартна, поэтому вот как вы можете обойти ее, используя Conditional-CSS:
// Пример условного CSS-блока div.box { ширина: 400 пикселей; [если IE 5] ширина: 600 пикселей; отступы: 0 100px; }Как вы можете видеть, Conditional-CSS позволяет вам поддерживать один файл CSS, а не несколько файлов, как это потребуется при использовании условных комментариев IE.Это помогает упростить обслуживание, а также делает код намного более понятным для редакторов.
Кроме того, одна важная особенность условного CSS заключается в том, что когда он находит оператор CSS @import , он автоматически открывает и вставляет импортированный файл. Это сокращает время загрузки вашей страницы, так как браузер должен сделать только один HTTP-запрос для ваших CSS-файлов.
Хотя ваши условные операторы CSS, скорее всего, будут нацелены на IE различных версий, Conditional-CSS исключительно полезен, когда вы сталкиваетесь с ошибкой CSS в других браузерах, которую часто бывает трудно исправить (а исправления обычно используют Javascript).Примеры включают отсутствие поддержки «display: inline-block» в Firefox 2 и ошибки фонового изображения в Safari 2. Они были исправлены в последних версиях этих браузеров, но обратная совместимость важна, хотя эти браузеры имеют значительную долю рынка.
Вот более полный пример:
На следующем рисунке показано, как страница отображается в IE7, Safari 3, Firefox 2 и Opera 9.
Обратите внимание, что этот пример не особенно удобен для развертывания в производственной среде, так как вы, вероятно, захотите, чтобы макет оставался одинаковым в разных браузерах и использовался только Conditional-CSS для исправления ошибок рендеринга CSS.Тем не менее, это хороший пример того, как разные CSS могут быть нацелены на разные браузеры.
Дополнительная информация, нацеливание на группы браузеров и более сложные условные выражения подробно обсуждаются на прилагаемой расширенной странице для Conditional-CSS.
Установка
Conditional-CSS доступен в трех различных форматах, каждый из которых обладает одинаковыми функциями и анализирует условные выражения в ваших CSS-файлах одинаковым образом.Какой формат вы хотите использовать, зависит от вашего сервера и простоты установки. Доступные форматы:
- PHP — Идеально подходит для быстрой и простой установки условного CSS на ваш сервер.
- C # — подходит для использования в .Net (IIS / Mono). Эта версия будет изначально работать в Windows как обработчик ASHX, как интерпретатор CGI или как CLI.
- C бинарный — немного сложнее в установке, но намного быстрее, чем версия PHP и может использоваться как интерпретатор (объяснение см. Ниже).
PHP версия
Если вы хотите попробовать Conditional-CSS, или у вас есть только несколько CSS-файлов на вашем сайте, тогда версия PHP идеально подходит для вас. Вам потребуется PHP 4 или PHP 5+, которые будут доступны на вашем сервере. Для установки:
- Используйте онлайновый компилятор условного CSS, чтобы загрузить настроенную версию условного CSS, указав имена файлов CSS.
- Поместите загруженный файл (c-css.php) на свой сервер в том же месте, что и ваши CSS-файлы.
- Загрузите файл «c-css.php», который вы загрузили, в свой веб-браузер и полюбуйтесь проанализированным CSS.
- Включите файл ‘c-css.php’ так же, как любой файл CSS на своих веб-страницах, используя: @import «{path_to _} / c-css.php»; (или похожие).
C # версия (для Windows / .Net / Mono)
C-версия Conditional-CSS предоставляет все функциональные возможности, возможности и полезность версий PHP и C на платформе Windows и идеально подходит для использования на IIS или Apache с Mono.Для установки Conditional-CSS в среде .Net доступны два варианта:
- ASHX handler — очень прост в установке и использовании
- CGI interpriter — немного сложнее в установке, но идеально подходит для установки на всей площадке
ASHX обработчик
Версия Conditional-CSS на C # ASHX идеальна, если вы хотите опробовать условный CSS в среде .Net или иметь только несколько CSS-файлов на своем сайте. Для установки:
- Используйте онлайновый компилятор условного CSS, чтобы загрузить настроенную версию условного CSS, указав имена файлов CSS.
- Разместите загруженный файл (c-css.ashx) на своем сервере в том же месте, что и ваши CSS-файлы.
- Загрузите файл «c-css.ashx», который вы загрузили, в свой веб-браузер и полюбуйтесь проанализированным CSS.
- Включите файл ‘c-css.ashx’ так же, как любой файл CSS на своих веб-страницах, используя: @import «{path_to _} / c-css.ashx»; (или похожие).
CGI программа
Как и версия C, CGI-версия C # может быть запущена либо в командной строке (для предварительного анализа файлов, которые затем могут быть обработаны с помощью условных комментариев IE), либо в качестве интерпретатора (процесс CGI).Это имеет значительное преимущество в скорости по сравнению с версией ASHX, и рекомендуется использовать эту версию для больших сайтов. Чтобы загрузить Conditional-CSS для Windows в виде CGI-программы:
- Используйте онлайновый компилятор условного CSS, чтобы загрузить настроенную версию условного CSS, введя имена файлов CSS и выбрав версию «C #».
- Используйте интерфейс командной строки для запуска условного CSS и анализа файлов CSS или следуйте приведенным ниже инструкциям для установки в качестве интерпретатора.
Использование Conditional-CSS в качестве интерпретатора исключительно полезно, когда вы хотите использовать несколько файлов Conditional-CSS на одном или нескольких сайтах. Таким образом, вам нужно установить только одну программу, и вы можете выбрать расширение (обычно .ccss), которое будет задействовать программу и будет анализировать указанный файл для браузера пользователя на лету. Для иллюстрации: браузер пользователя запросит «/media/css/site.ccss» (через оператор @import), который является стандартным файлом CSS, но с встроенными условными комментариями.IIS будет вызывать условный CSS, который будет анализировать файл и отправлять требуемый CSS обратно пользователю.
Чтобы установить условный CSS на IIS в качестве интерпретатора CGI:
- Используйте онлайновый компилятор условного CSS для загрузки настроенной версии условного CSS. Выберите версию C # и оставьте имена файлов пустыми. Добавьте информацию об авторских правах и авторах, если хотите.
- Откройте «Диспетчер IIS» из меню «Пуск».
- Выберите параметр «Отображения обработчика» для определенного веб-сайта или в качестве глобального параметра и добавьте новое сопоставление («Добавить обработчик сценариев… ‘).
- В диалоговом окне, которое появляется в пути запроса, введите расширение, которое вы хотите использовать для файлов условного CSS (рекомендуется * .ccss и типично).
- В поле «Исполняемый файл» перейдите в папку, в которую вы скачали и сохранили «c-css.exe», и выберите этот файл.
- жмем ок!
- Создайте свой файл условного CSS, и вызовите {нечто} .ccss
- Загрузите этот файл в ваш веб-браузер через ваш веб-сервер и все!
Обратите внимание, что Conditional-CSS считывает переменные среды (как и следовало ожидать от программы CGI), что может потребовать дополнительного рассмотрения параметров безопасности.Если при попытке загрузить файл .ccss вы получили необработанное предупреждение системы безопасности, вам может потребоваться принять это во внимание. В Windows убедитесь, что загруженная программа (c-css.exe) «разблокирована» — щелкните правой кнопкой мыши -> «Свойства».
ВерсияC (для Linux / Unix / Mac OS X
Версия C была разработана, потому что она значительно быстрее, чем версия PHP, и не требует дополнительных затрат на библиотеки PHP. Поэтому, если у вас нет PHP на вашем сервере, вы сможете использовать эту версию.В своей основной форме его установка аналогична версии PHP:
- Используйте онлайновый компилятор условного CSS, чтобы загрузить настроенную версию условного CSS, введя имена файлов CSS и выбрав версию «C».
- Разместите загруженный файл (c-css) на своем сервере в том же месте, что и ваши CSS-файлы.
- Убедитесь, что вы дали разрешения на выполнение c-css (755), так как он будет запускаться как скрипт CGI.
- Включите файл ‘c-css’ так же, как любой файл CSS на своих веб-страницах, используя: @import «{path_to _} / c-css»; (или похожие).
Обратите внимание, что если вы хотите использовать C-версию Conditional-CSS на любой платформе, кроме Linux x86, вы можете скачать исходный код внизу этой страницы и скомпилировать его, используя любой компилятор C. Источник очень переносимый и будет работать на огромном количестве аппаратного и операционного систем.
Самым большим преимуществом C-версии Conditional-CSS является не скорость, а то, что она также может быть использована в качестве интерпретатора. Это означает, что если вы устанавливаете двоичный файл с условным CSS на свой сервер, как если бы вы использовали обычную программу (например, в / usr / bin /), вы можете включить одну строку (hash-bang) в верхней части вашего файла. CSS-файлы и Conditional-CSS проанализируют ваш файл для вас.Это делает установку всей системы очень простой. Подумайте об использовании условного CSS, как если бы вы использовали язык сценариев, такой как Perl или Bash.
Пример CSS-файла с использованием c-css в качестве интерпретатора показан ниже:
#! / usr / bin / c-css -i / * * CSS файл * / html, body { поле: 0; отступы: 0; } //и т.дОбратите внимание, что коммутатор i (-i) указывает Conditional-CSS выводить заголовки, необходимые для того, чтобы сообщить веб-браузеру, что он собирается получить CSS. Для более подробной информации о параметрах командной строки, пожалуйста, обратитесь к расширенной странице на этом сайте.
Если вы используете этот метод, вы должны убедиться, что ваш файл CSS может быть выполнен как программа CGI. Сделайте это, сначала добавив права на выполнение файла (755). Возможно, вам также придется указать вашему HTTP-серверу запустить файл как программу. Вы делаете это в Apache, используя файл .htaccess, аналогичный показанному ниже (альтернативные методы доступны на других HTTP-серверах):
Опции + ExecCGI AddHandler cgi-скрипт .cssКредиты
Conditional-CSS основан на одном из моих проектов, разработанных в U4EA Technologies.U4EA любезно позволил мне выпустить Conditional-CSS в качестве программного обеспечения с открытым исходным кодом на этом сайте. Особая благодарность Грэму Уилмотту за рецензирование проекта и Шону Педли за то, что он поделился со мной своим опытом. Без помощи всех в U4EA условный CSS был бы невозможен — так что спасибо всем!
,