Представляем GSS: таблицы стилей сетки

Возможно, вы недавно слышали о таблицах стилей сетки (GSS) в мире HTML и CSS. GSS переоценивает макет CSS и заменяет механизм компоновки браузера на тот, который использует Cassowary Constraint Solver . Те из вас, кто не понял ни слова об этом … привет и добро пожаловать!

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

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

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

Краткая история

GSS — это создание The Grid с Дэном Токкини в качестве его основателя и генерального директора. Это объясняет, почему таблицы стилей, не основанные на сетке, называются таблицами стилей сетки.

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

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

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

По сути, GSS — это препроцессор CSS и среда выполнения JavaScript, которая использует Cassowary.js. Те из вас, кто еще не знает, Cassowary.js — это порт JavaScript, который Apple использует в Autolayout Cocoa .

И GSS, и Cassowary основаны на ограниченном программировании, что делает его идеальным для расширения возможностей декларативных языков, таких как CSS. Ограниченное программирование — это парадигма, с помощью которой веб-разработчики должны заявить «что» и оставить «как» до математического решателя.

Ограниченное программирование фокусируется на намерениях, а не на реализации.

Теперь, когда мы установили некоторую справочную информацию, давайте перейдем к функциям, которые предлагает GSS.

Обзор GSS

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

Это подводит нас к первой особенности GSS: вы сами определяете, каким должен быть макет . Прошли те дни, когда мы тратили бесчисленные часы проб и ошибок, разрабатывая стратегию построения макета.

.subscribe-button[right] == ::window[width]; .subscribe-button[center-y] == .header[center-y]; 

 #light[years] == 50 !weak; #light[years] == 20 !medium; #light[years] == 35 !strong; /* #light[years] will hold the value 35 */ 

 p[line-height] >= 10; p[line-height] <= ::window[height] / 20; 

 #elementa[height] == 150; #elementb[height] == 150; #elementa[height] + #elementb[height] == 225; 

 #elementID[height] == 150; /* id */ div[height] == 150; /* element */ .className[height] == 150; /* class */ 

 section < article { .aclass { height: == 150; } } 

 (section < article .aclass)[height] == 150; 

 .container { height: == #elm[height]; } 

 .container { &[height] == #elm[height]; } 

 /* this expression is not linear */ #elementa[height] * #elementb[width] == newElement; 

 $ bower install gss 

 <script src="/bower_components/gss/dist/gss.js"></script> <script type="text/javascript"> window.engine = new GSS(document); </script> 

 <link rel="stylesheet/gss" type="text/gss" href="my-first-gss-styles.gss"></link> 

 <style type="text/gss"> /* GSS code ... */ </style> 

 <!-- GSS engine script --> <script src="gss.js"></script> 

 <!-- Giving GSS the document object --> <script type="text/javascript"> window.engine = new GSS(document); </script> 

 <div class="foo"> <h2>When in doubt, use GSS.</h2> </div> 

 <style type="text/gss"> </style> 

 <style type="text/gss"> .foo { center: == ::window[center]; height: == ::[intrinsic-height]; width: == height / 2; } </style> 

 <script> GSS_CONFIG = { worker: "/path/worker.js", useWorker: false, fractionalPixels: false } </script> <script src="/path/gss.js"></script> 

 <div class="square"></div> 

 .square { background: rgb(255, 0, 0); } 

 <style type="text/gss"> </style> 

 <style type="text/gss"> .square { center: == ::window[center]; rotate-z: == ::window[width]; size: == 175; } </style>