Эволюция веб-дизайна: от верстки с таблицами к CSS Grid
Даже в самых смелых мечтах Тим Бернерс-Ли не мог себе представить! какой будет эволюция веб-дизайна. На протяжении многих лет он обновлялся в соответствии с потребностями рынка! постоянно добавляя новые функции на языках HTML и CSS.
Мы перешли от простого текста к полностью адаптивным сеткам ! которые адаптируются к любому типу устройств. Давайте сделаем обзор по ходу дела?
Оглавление
1 Ранние годы
2 Изобретение FLOAT
3 Flexbox! революция
4. Появление CSS Grid
Ранние годы
Два десятилетия назад! когда практически единственным Данные телеграммы Израиля существующим браузером был Internet Explorer ! способом создания минимально привлекательного веб-сайта было использование таблиц со строками и столбцами. Это была трудоемкая и очень ограниченная работа ! поскольку мы почти всегда работали с фиксированными размерами (хотя! правда! вряд ли существовало разнообразие экранов для отображения
Схема раскладки с таблицами в веб-дизайне
Схема раскладки с таблицами
Более того! внедрение стилей осуществлялось только встроенным! что приводило к огромным строкам кода и необходимости повторять все атрибуты стиля для каждого элемента . Лишь в 1998 году с появлением CSS контент стал отделяться от представления. После этого создание контента и изменения в нем будут осуществляться более структурированным и простым для интерпретации человеческим глазом способом. Давайте посмотрим это на примере:
Представленный стиль ( paragraph_style ) будет Как работает система тикетов в службе поддержки Help Desk? определен в таблице стилей CSS! поэтому необходимо только связать элементы! которым он нужен! с его стилем. Это значительно сократит время модификации и облегчит чтение кода.
Изобретение FLOAT
С появлением свойства float мы начали размещать плавающие элементы справа и слева. Он возник в имитации редакционной верстки ! где изображения уже могли «плавать» в текстах документов. Это также представляло собой улучшение по сравнению с таблицами! поскольку больше не было необходимости выполнять всю предыдущую разметку в HTML .
С помощью float родилась базовая сетка: заголовок ! боковая панель ! основной контент и нижний колонтитул . Это было время! когда веб-сайты уже начали лучше адаптироваться к различным разрешениям экрана.
Схема макета с плавающей запятой в веб-дизайне
Пример макета с Float
CSS уже был установлен! но результат работы веб-сайта сильно различался в зависимости от браузера! в котором вы его посещали. Фактически! потребовалось несколько лет! прежде чем инструкции и способ просмотра стилей в каждом браузере стали в некоторой степени гомогенизированными.
Это обстоятельство существует и сегодня. Инструмент ар числа CanIUse помогает нам проверить! какие инструкции CSS разрешены или реализованы в зависимости от браузера и его версии.
Если вы начинаете разрабатывать свой веб-сайт! прототипирование может быть очень полезным.
Флексбокс! революция
С появлением устройств с несколькими дисплеями (смартфонов! планшетов! ноутбуков…) плавучести стало недостаточно. Сеть должна была стать более гибкой и разумно адаптироваться ко всем этим новым разрешениям. Вот почему был разработан Flexbox ! и это была революция. Контент динамически адаптируется к экрану! на котором он находится! без необходимости предварительного определения фиксированного размера.