История CSS в течение пятнадцати лет 24 способов ◆ 24 способов

                

За 15 лет работы в 24 направлениях я написал девять статей, и все, кроме одной, были связаны с CSS. В этом последнем году проекта, я подумал, что оглянемся на эти статьи CSS. Это было интересное путешествие, и, прочитав мои слова за последние 15 лет, я обнаружил не только то, насколько эволюционировала веб-платформа, но и то, как изменилось мое собственное мышление.

2005: исходные точки макета CSS

Последние версии веб-браузера: Internet Explorer 6 (на данный момент 4 года), IE5.1 Mac, Netscape 8, Firefox 1 .5, Safari 2

Пятнадцать лет назад мой вклад в 24 способа начался с статьи о макете CSS. Эта статья исследовала то, что я использовал в своей работе. В 2005 году большая часть работы, которую я выполнял, заключалась в создании веб-сайтов из файлов Photoshop, доставленных мне клиентами моего дизайнерского агентства. Я создал набор надежных, проверенных и протестированных макетов CSS, чтобы использовать их для реализации. Моя отправная точка при подходе к любому проекту состояла в том, чтобы взглянуть на статичные композиции и выяснить, какой макет я бы использовал:

• Жидкость, несколько столбцов без нижнего колонтитула
• Жидкость, несколько столбцов с нижним колонтитулом
• Фиксированная ширина по центру

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

Конечно, я был не единственным, кто так думал. Два сайта, с которых ранние CSS для энтузиастов макета черпали большую часть своего вдохновения, имели библиотеку шаблонов для макета CSS. Маленькие коробки с информацией об инциденте с лапшой все еще в сети, к сожалению, glish.com/css доступен только в интернет-архиве.

Какой из двух возможных веб-сайтов вы сейчас разрабатываете? pic.twitter.com/ZD0uRGTqqm

— Джон Голд (@jongold) 2 февраля 2016 г.

Это мышление перешло в гораздо более экстремальные времена в 2011 году, когда Twitter Bootstrap запустил и начал с целой платформы для верстки, и гораздо больше стало обычным явлением в отрасли. Хотя я понимаю озабоченность многих людей по поводу того, что каждый сайт выглядит одинаково, в 2005 году я был прагматиком. Это не изменилось. Я всегда создавал веб-сайты и управлял бизнесом наряду с евангелизацией веб-стандартов и содействием платформе. Я все о том, чтобы выполнить работу, оплатить счета, уравновесить это с попытками улучшить ситуацию, чтобы нам не приходилось идти на компромиссы в будущем. Если это означает выбор из одного из множества шаблонов, это часто очень разумный подход. Не все должно быть творческим излиянием.

Однако сегодня CSS Grid Layout и Flexbox означают, что мы можем использовать гораздо более гибкий подход к разработке макетов. Это позволяет практическое и творческое. Потребность в начальных точках компоновки — будь то простая, как у меня, или полная структура, такая как Bootstrap — кажется, уменьшается, однако на их месте появляется интерес к библиотекам компонентов. Этот подход к разработке частично обусловлен тем фактом, что новая компоновка позволяет помещать компонент в середину компоновки, не взрывая все это.

2006: ускоренная разработка с использованием констант CSS

Последние версии веб-браузера: Internet Explorer 7, Netscape 8.1, Firefox 2 Safari 2

Моя статья в 2006 году была снова взята из работы, которую я выполнял как разработчик. Я всегда был таким же, если не бэкэнд-разработчиком, как фронтендом. В 2006 году я работал над PHP на пользовательских реализациях CMS. Они также обычно включают фронт-энд работы. Вместе с несколькими другими людьми в отрасли я экспериментировал со способами использования «констант» CSS, как мы все их называем, обрабатывая CSS с помощью нашего предпочтительного языка на стороне сервера.

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

Также в 2006 году была выпущена первая версия Sass, созданная Хэмптоном Кэтлином и Натали Вайзенбаум. Sass, LESS и другие препроцессоры стали предоставлять нам более удобный и элегантный способ получения переменных в CSS.

В 2009 году потребность в препроцессорах исключительно для переменных исчезает. У CSS теперь есть пользовательские свойства — то, чего я не предвидел в 2006 году. Эти «переменные CSS» гораздо более эффективны, чем обмен значениями в процессе сборки. Их можно динамически изменять, основываясь на чем-то, что меняется в среде, а не статически настраивать во время сборки.

2009: более чистый код с селекторами CSS3

Последние версии веб-браузера: Internet Explorer 8, Firefox 3.5, Safari 4, Chrome 3

После перерыва в написании 24 способов, в 2009 году я написал эту статью о селекторах CSS3, в комплекте с откатами jQuery из-за того, что некоторые из этих селекторов не были использованы в Internet Explorer 8.

Сегодня эти полезные селекторы имеют широкую поддержку браузера, у нас также есть большое количество новых селекторов, которые являются частью спецификации уровня 4. Раздел изменений спецификации уровня 4 дает превосходное краткое изложение того, что было добавлено за эти годы. Браузерная поддержка для этих новых селекторов более противоречива, у MDN есть превосходный список со страницей для каждого селектора, подробно описывающей текущую поддержку браузеров и примеры использования.

2012: предоставление приоритета содержимого с помощью сетки CSS3

Последние версии веб-браузера: Internet Explorer 10, Firefox 17, Safari 6, Chrome 23

Моя статья 2012 года была в начале моего интереса к спецификации CSS Grid Layout. Ранее в 2012 году я посетил семинар, который проводил Берт Бос, на котором он продемонстрировал некоторые модули CSS ранней стадии, включая спецификацию CSS Grid Layout. Вскоре я обнаружил, что в IE10 будет реализована Grid, новый браузер, выпущенный в сентябре 2012 года, и я начал изучать, как использовать Grid Layout. Эта статья была основана на том, что я узнал.

Проблема исходного и визуального порядка

Как разработчик CMS, я сразу же связал возможность размещения элементов и определения приоритетов контента с CMS и редакторами контента. Я стремился найти способы, позволяющие редакторам контента определять приоритеты контента между точками останова, и я чувствовал, что Grid Layout может позволить нам сделать это. Как оказалось, мы все еще далеки от этой цели. Несмотря на то, что Grid позволяет отделить визуальное отображение от исходного порядка, это может стоить дорого. Невизуальные браузеры и порядок вкладок документа следуют за источником, а не за визуальным отображением. Это облегчает создание отсоединенного и сложного в использовании опыта, если мы по сути перемешиваем отображение элементов, отодвигая их от того, как они появляются в документе. Я все еще думаю, что проблема, которую нам нужно решить, это как позволить разработчикам указать, что визуальное отображение следует рассматривать в правильном порядке, а не в порядке документа.

Спецификация сетки перенесена на

Некоторые проблемы в этой ранней версии спецификации сетки были очевидны в моей статье. Мне нужно было использовать препроцессор, чтобы вычислить столбцы, которые охватит элемент. Отчасти это было связано с тем, что в ранних спецификациях сетки не было концепции свойства gap . Кроме того, первоначальная спецификация не включала автоматическое размещение, и поэтому каждый элемент должен был быть явно размещен в сетке. Основы окончательной спецификации были там, однако за последующие годы спецификация была уточнена и разработана. Мы получили пробелы и автоматическое размещение, а также было введено свойство grid-template-area . Ко времени выпуска Grid в Firefox, Chrome и Safari многие из проблем, с которыми я столкнулся при написании этой статьи, были решены.

2015: Сетка, Flexbox, Выравнивание коробок: наша новая система макетов

Последние версии веб-браузера: Edge 13, Firefox 43, Safari 9, Chrome 47

Grid по-прежнему не поставлялся в большее количество браузеров, но спецификация изменилась. Мы поддерживали разрывы со свойствами grid-row-gap grid-column-gap и grid-gap . Мое собственное размышление о спецификации и соответствующих спецификациях было разработано. Я начал преподавать сетку не как отдельный модуль, а вместе с Flexbox и Box Alignment. Я пытался продемонстрировать, как эти модули работают вместе, чтобы создать систему верстки для современной веб-разработки.

Еще одно место, куда я перешел, начиная с моей первой статьи о Grid в 2012 году, касалось переупорядочения контента и доступности. В июле 2015 года я написал статью под названием «Современная компоновка CSS, мощь и ответственность», в которой изложил эти проблемы.

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

«Вопрос, который мне постоянно задают, состоит в том, являются ли макет сетки CSS и flexbox конкурирующими системами макетов, как если бы можно было поддержать проигравшего в конкурсе макетов CSS. Реальность, однако, заключается в том, что эти два метода будут объединены в единую систему для создания макета в Интернете, причем каждый из этих методов будет играть определенную роль и служить определенным задачам макета ».

2016: что дальше для CSS Grid Layout?

Последние версии веб-браузера: Edge 15, Firefox 50, Safari 10, Chrome 55

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

Основной темой была подсетка, которая к этому моменту была удалена из спецификации уровня 1. Рабочая группа CSS все еще пыталась решить, будет ли приемлема версия подсетки, привязанная к обоим измерениям. В этой версии мы бы объявили display: subgrid на элементе сетки, после чего его строки и столбцы будут привязаны к дорожкам родителя. Я очень рад, что в конечном итоге было решено учесть одномерные подсетки. Это означает, что вы можете использовать дорожки столбцов родительского элемента, но иметь неявную сетку для строк. Это позволяет использовать шаблоны, такие как описанный мной в шаблоне проектирования, решаемый подсетью. В конце 2019 года у нас еще не было широкой поддержки браузеров для подсетки, однако Firefox уже отправил значение в Firefox 71. Надеемся, что другие браузеры последуют его примеру.

Уровень 2 спецификации сетки в конечном итоге стал добавлением поддержки подсетки, поэтому у нас пока нет других функций, которые я упомянул в этой части. Все эти функции подробно описаны в репозитории Github рабочей группы CSS и о них не забывают. Поскольку мы приходим к решению функций для Уровня 3, возможно, некоторые из них сделают сокращение.

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

2017: новогодние подарки для будущего: тестирование веб-платформы

Последние версии веб-браузера: Edge 16, Firefox 57, Safari 11, Chrome 63

В 2017 году я отошел от прямых разговоров о верстке и вместо этого опубликовал статью о тестировании. Не о тестировании собственного кода, а о проекте «Тесты веб-платформы» и о том, как участие в тестах, которые помогают обеспечить взаимодействие между браузерами, может принести пользу платформе — и вам.

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

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

2018: исследование свойства в спецификациях CSS

Последние версии веб-браузера: Edge 17, Firefox 64, Safari 12, Chrome 71

Я почти держался в стороне от макета в своей пьесе 2018 года, однако в этой статье я включил свойство Grid Layout grid-auto-row . Если вы хотите понять, как выкапывать все детали CSS-свойства, тогда эта статья по-прежнему полезна.

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

2019: И это завершение

Последние версии веб-браузера: Edge 18, Firefox 71, Safari 12, Chrome 79

Этот год является последним отсчетом для 24 способов. В связи с тем, что многие другие публикации создают отличный контент, возможно, в последние дни каждого года меньше необходимости в лавине писем. Архив останется историей того, что было важно, о чем мы думали, и проблем современности, многие из которых мы сейчас решили таким образом, который авторы никогда не могли себе представить. В моих статьях я вижу, как развивалось мое мышление на протяжении многих лет, и я так же взволнован, что произойдет дальше, как и в 2005 году, и удивляюсь, как упростить макет CSS.