#css #stylesheet
#css #таблица стилей
Вопрос:
Прежде чем углубиться в свой вопрос, я должен сначала представить краткий обзор того, с какой точки зрения я исхожу: большую часть своей работы по веб-разработке (примерно до года назад) я почти полностью сосредоточился на серверной разработке. Следовательно, большая часть моих последних месяцев была потрачена на освоение JavaScript, инструментов AJAX, библиотек JS, манипулирования DOM и, конечно же, каскадных таблиц стилей. Я нашел способ адаптировать и использовать свой способ мышления практически ко всем этим аспектам веб-разработки и делать некоторые по-настоящему аккуратные вещи, но CSS продолжает оставаться для меня неуловимым. Практически каждый веб-ресурс, с которым я сталкивался, объясняющий, как использовать CSS, описывает эту технологию в очень сжатой форме. Пока я не вижу ничего, кроме бесконечного списка примеров макетов и стилей, с помощью которых они выполняются. И, конечно, что еще хуже: часто существует несколько способов достижения одной и той же цели и множество фрагментированных «подводных камней» для устранения несоответствий браузера.
Для меня: CSS не является полнофункциональным языком программирования (т. Е. он не завершен по Тьюрингу). Следовательно, изучение CSS похоже на попытку взломать сложный XML-файл, не имея четкого представления о том, как программное обеспечение, использующее указанный файл, будет его интерпретировать. То, что я ищу, — это алгоритмическое описание того, как CSS интерпретируется каждым из основных браузеров (IE, Chrome и FireFox).Для меня это было бы гораздо предпочтительнее, чем подход грубой силы, который я был вынужден использовать до сих пор.
Комментарии:
1. спасибо mVChr, хороший призыв к изменению форматирования 🙂
2.
What I am looking for is an algorithmic description of exactly how CSS is interpreted by each of the major browsers (IE, Chrome and FireFox)— Я не думаю, что это существует (по крайней мере, не все в одном месте), особенно если вы рассматриваете более старые версии IE. Так оно и должно быть , о чем вы можете узнать, прочитав соответствующие спецификации W3. И затем есть то, что есть на самом деле , со всеми неприятными причудами / несоответствиями / вариациями поведения.
Ответ №1:
CSS действительно другой зверь. Как вы и предположили, это не завершение по Тьюрингу. Кроме того, понимание языка Turing complete не очень поможет вам в понимании CSS. Правило CSS, которое вы пишете, может применяться или не применяться браузером в зависимости от многих факторов:
- «Вес»
- Расположение
- Важность
- Область
- Наследование
Вам почти нужно залезть в голову браузера, чтобы написать CSS :). Но эти ресурсы должны помочь вам:
Прямо из источника: http://www.w3.org/TR/CSS2/cascade.html
Статья: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade
Редактировать
Если вы хотите ознакомиться с некоторым реальным кодом, который выполняет эти вычисления (например, Firefox), то просмотрите эти файлы по ссылке ниже. Также включены наборы правил CSS по умолчанию, которые Firefox автоматически применяет к каждой странице.
Комментарии:
1. Но являются ли они алгоритмически полными в своих описаниях? Как насчет различий в алгоритмах, используемых каждым браузером? Простите меня, если это кажется немного упрямым, но я, по сути, ищу некоторый код … псевдокод, вероятно, был бы адекватен.
2. Браузеры применяют тот же общий алгоритм, но с особенностями. Как правило, причуды возникают из (а) их таблиц стилей по умолчанию, (б) понимает ли движок CSS (та часть, которая вычисляет, какие правила применять) каждое правило (в конце концов, некоторые браузеры поддерживают свои собственные уникальные правила) и (в) точно ли движок верстки (та часть, которая фактически отображает текст, изображения и т.д.) Обрабатывает элементы, которые ему необходимо отобразить. Все эти вещи выходят далеко за рамки заданного вами вопроса, но я бы пригласил вас взглянуть на исходный код, скажем, Mozilla Firefox. Надеюсь, это поможет.
3. ** Чтобы написать CSS, вам почти нужно проникнуть в голову браузера ** И поскольку «голова браузера» — это четко определенный алгоритм, именно поэтому я ищу алгоритм 🙂 В любом случае, вы высказали несколько очень полезных замечаний, и я обязательно еще немного почитаю. На самом деле, я мог бы даже просто RTFS (подсказка: S = Source). FireFox и WebKit имеют открытый исходный код, поэтому…
4. Я знаю, что вы ищете алгоритм, но знайте следующее: самое простое объяснение, которое вы получите, — это первые две ссылки, которые я опубликовал. Если вы хотите что-то еще более подробное, вам нужно будет прочитать фактический исходный код. Удачи 🙂
Ответ №2:
Вы могли бы попробовать прочитать спецификацию. Я бы посоветовал прочитать хотя бы разделы «Модель коробки» и «Модель визуального форматирования». Если вы понимаете основные концепции там, остальное — детали!
Ответ №3:
Это официальная домашняя страница CSS:http://www.w3.org/Style/CSS
Вот полная спецификация: http://www.w3.org/TR/CSS21
Они должны обеспечить фон, который вы ищете. Однако языки, подобные CSS, часто лучше всего изучаются на примерах. Существует так много несоответствий между браузерами, что лучшее, что можно сделать, это просто набраться опыта. Вскоре вы узнаете все тонкости, и различия станут очевидны со временем.