css3 — вопросы с ответами

Структура CSS3

CSS (Cascading Style Sheets) – формальный язык описания внешнего вида документа, суть которого состоит в объявлении правил: при различных условиях мы хотим, чтобы определенные вещи происходили. Если этот класс добавлен к этому элементу, примените эти стили. Если элемент X является дочерним элементом элемента Y, примените эти стили. Затем браузер берет эти правила, выясняет, какие из них применяются и где, и использует их для отображения страницы.

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

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

CSS3 стал модульным

Создание языка стилей по умолчанию для каждого документа на основе разметки в мире – огромная задача, и W3C (Консорциум Всемирной паутины, отвечающий за установку стандартов CSS) осознает, что для ее реализации потребуются многие годы. Члены W3C, понимая, что они не хотят поддерживать некоторые из наиболее очевидных, востребованных функций, пока они рассматривали и обсуждали некоторые из более эзотерических, решили разделить CSS3 на различные модули.

Вот почему вместо одного монолитного документа спецификации CSS3 у вас есть модуль базового интерфейса пользователя CSS3, Selectors Level 3, медиазапросы и т. д. Некоторые из этих модулей являются ревизиями CSS2.1, а некоторые только что созданы, но все они попадают под баннер CSS3.

Модульная система

Поскольку CSS стал модульным, каждому модулю назначается номер уровня, чтобы отмечать, сколько ревизий он прошел. Некоторые из более старых модулей, такие как селекторы, уже находятся на уровне 4; многие из модулей, описанных в этой статье, находятся на уровне 3; тогда как некоторые очень новые модули, такие как Flexbox, находятся только на уровне 1 или, возможно, переходят на уровень 2.

Это означает, что CSS является рабочим проектом стандарта: каждый модуль будет двигаться в своем собственном темпе и новые модули будут добавляться по мере необходимости. CSS3 – это просто удобное сокращение, означающее "функции CSS, разработанные начиная с CSS2.1". CSS4 никогда не будет существовать. Со временем нумерация исчезнет, ​​и у нас будет только CSS с модулями на разных уровнях.

Статус модуля и процесс рекомендации

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

Когда предложенный документ впервые принимается как часть CSS3, его статус обозначается как Working Draft. Этот статус означает, что документ был опубликован и теперь готов к рассмотрению сообществом, в данном случае сообществом являются создатели браузеров, рабочие группы и другие заинтересованные стороны. Документ может оставаться рабочим проектом в течение длительного периода, подвергаясь многочисленным изменениям. Не все документы проходят этот уровень статуса, и документ может возвращаться к этому статусу во многих случаях.

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

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

Если два или более браузеров реализовали свойства одинаковым образом и если не было выявлено серьезных технических проблем, документ может перейти в Proposed Recommendation. Этот статус означает, что предложение в настоящее время является полным, реализованным и готовым для одобрения Консультативным комитетом W3C. Когда это одобрение получено, предложение становится Рекомендацией (Recommendation).

Процесс рекомендации и процесс реализации не всегда работают одинаково. Модуль может быть хорошо реализован во всех браузерах, но при этом все еще находится в состоянии Working Draft. И наоборот, модуль может иметь статус Candidate Recommendation, но имеет лишь ограниченную реализацию (CSS Shapes в настоящее время соответствует этому описанию).

Синтаксис

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

В этом примере кода селектор представлен с помощью E. Конечно, в HTML этот селектор не существует; мы просто использую его, чтобы указать, что селектор не имеет значения; здесь может быть использован любой селектор.

Далее у вас есть собственное свойство; в этом случае мы использовали вымышленное свойство, называемое property. После этого стоимость имущества. Для этого мы используем выделенный курсивом псевдоним для ссылки на значение, которое в этом случае мы назвали value.

Если свойство принимает несколько значений, мы перечислим каждое из них с уникальным псевдонимом. Таким образом, новое свойство, которое требует трех значений, может быть определено так:

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

И когда дело дошло до практического примера, мы могли бы показать его с допустимым значением (например, с числовым значением):

Vendor prefixes

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

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

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

Несмотря на благие намерения, использование vendor prefixes привело ко многим проблемам: разработчики использовали их на своих рабочих веб-сайтах, но не удалили их позднее, когда изменилась реализация браузера. Это в свою очередь означало, что создатели браузеров должны постоянно поддерживать экспериментальные функции, чтобы избежать поломок на веб-сайтах, которые их используют. Из-за этого Chrome и Firefox теперь отказываются от использования свойств с префиксами, предпочитая вместо этого реализовывать новые функции, которые по умолчанию отключены и должны выбираться разработчиками, пока они не станут достаточно стабильными для широкого использования.

Селекторы

Селекторы – это сердце CSS, и хотя в оригинальной спецификации CSS1 их было только 5 или 6, CSS2 расширил диапазон еще на 12. CSS3 идет еще дальше, примерно вдвое увеличивая количество доступных селекторов.

Селекторы можно разделить на две категории. К первым относятся те, которые действуют непосредственно на элементы, определенные в дереве документа (например, p-элементы и атрибуты href); эта категория содержит селекторы классов, типов и атрибутов. Ради целесообразности мы сгруппировали их под флагом селекторов DOM. Вторая категория содержит псевдоселекторы, которые воздействуют на элементы или информацию, которая находится за пределами дерева документа (например, первая буква абзаца или последний дочерний элемент родительского элемента).

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

Выбор значения атрибута начала подстроки

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

Этот код ищет указанное значение в начале указанного атрибута. Чтобы проиллюстрировать это, рассмотрим следующий пример разметки, показывающий список из трех элементов, каждый из которых содержит гиперссылку с разными (хотя и схожими) значениями для атрибута title:

Теперь применим этот селектор к разметке примера:

В этом случае правило будет применено к элементу "a" в первом элементе списка, поскольку строка атрибута title начинается со слова image. Однако правило не будет применяться к элементу "a" во втором элементе, поскольку, хотя его атрибут title содержит эту строку, он не начинается с нее. Он также не будет применен к третьей строке, так как эта строка не отвечает соответствиям.

10 ответов
Я пытаюсь центрировать мой Контейнер в середине страницы, используя Bootstrap 4.
bootstrap-4
flexbox
15 фев. 2017, в 14:36
19 ответов
Что я ищу: Способ стилизовать одну половину персонажа. (В этом случае половина буквы будет прозрачной) Что я сейчас искал и пробовал (Без удачи): Методы оформления половины символа/буквы Стилизация части персонажа с помощью CSS или JavaScript Применить CSS к 50% персонажа Ниже приведен пример ...
09 май 2014, в 16:01
22 ответа
Я использую Twitter Bootstrap 3, и у меня проблемы, когда я хочу выровнять по вертикали две div, например - ссылка JSFiddle: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional...
twitter-bootstrap-3
12 дек. 2013, в 13:55
10 ответов
[IMG_OUR_ID=126.jpg] Мне нужно создать отзывчивую страницу, используя bootstrap, поместив div в центр страницы, как в приведенном ниже макете.
responsive-design
22 нояб. 2013, в 08:47
9 ответов
В настоящее время я использую twitter bootstrap 3, и мне приходится сталкиваться с проблемой создания отзывчивого изображения. Я использовал класс img-responsive. Но размер изображения не увеличивается. Если я использую width:100% вместо max-width:100%, тогда он отлично работает. В чем проблема? Это...
19 сен. 2013, в 19:52
15 ответов
Я пытаюсь использовать функцию Modal из Bootstrap 3, чтобы показать мое видео Youtube. Он работает, но я не могу нажимать на какие-либо кнопки в видео Youtube. Любая помощь по этому поводу? Здесь мой код: <div id="link">My video</div> <div id="myModal" class="modal fade" tabindex="-1...
twitter-bootstrap-3
youtube
04 сен. 2013, в 19:11
9 ответов
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> <%= image_tag "Background.jpg" %> </div> </div> Как сделать твитерский загрузочный модальный всплывающий всплывающи...
25 авг. 2013, в 19:32
16 ответов
Я использую Bootstrap 3 для создания гибкого макета, где я хочу настроить несколько размеров шрифта в соответствии с размером экрана. Как я могу использовать медиа-запросы для создания такой логики?
media-queries
25 авг. 2013, в 00:55
5 ответов
Я начинаю работу с Bootstrap 3, и у меня возникают проблемы с пониманием того, как будут использоваться классы grid. Вот что я догадался до сих пор: Похоже, что классы col-sm-# и col-lg-# отличаются от простого старого col-# тем, что они будут применяться только тогда, когда экраны превышают определ...
twitter-bootstrap-3
09 авг. 2013, в 11:53
25 ответов
То, что я пытаюсь сделать, - изменить цвет всплывающей подсказки на красный. Тем не менее, я также хочу иметь несколько других цветов, поэтому я не просто хочу заменить исходный цвет всплывающей подсказки. Как мне это сделать?
14 июль 2013, в 19:12
14 ответов
У меня этот код в разбивке на страницы <div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div&...
07 март 2013, в 05:32
4 ответа
Когда ширина таблицы превышает ширину пролета, как эта страница: http://jsfiddle.net/rcHdC/ Вы увидите, что содержимое таблицы находится за пределами span. Каким будет лучший способ удовлетворить этот случай?
02 март 2013, в 15:53
9 ответов
Документация бутстрапа по этой теме немного сбивает меня с толку. Я хочу добиться аналогичного поведения, например, в документах с аффикс-навигатором: навигационная панель находится под заголовком абзаца/страницы, а при прокрутке вниз она должна сначала прокручиваться, пока не дойдет до верхней част...
22 авг. 2012, в 11:40
6 ответов
Я пытаюсь работать над созданием дерева (например, дерева каталогов), которое использует как можно больше CSS и как можно меньше JS (только для состояний и т.д.), и я хочу знать, есть ли какое-то хорошее существующее дерево плагины для bootstrap или jquery-ui bootstrap. Для справки или для людей, см...
23 июнь 2012, в 08:59
7 ответов
Поддерживает ли Bootstrap кнопки фиксированной ширины? В настоящее время, если у меня есть две кнопки, "Сохранить" и "Загрузить", размер кнопки изменяется в зависимости от содержимого. И какой правильный способ расширения Bootstrap?
15 июнь 2012, в 13:51
Наверх
Меню