WebSite x5 форум Web мастеров
WebSite X5 => Новости => Тема начата: admin от 22 Декабрь, 2018, 16:04:21 pm
-
Одна из наших любимых мантр: «Упростить то, что сложно».
По сути, это основная цель WebSite X5: превратить такое сложное мероприятие, как создание веб-сайта, в серию простых задач, которые легко могут выполнить даже люди, не имеющие навыков или опыта в данной области.
Вот почему мы обычно не говорим с вами о коде или технических вопросах. Мы позаботимся об этих аспектах и позволим вам сосредоточиться на своем контенте и на том, как вы хотите донести его через веб-страницы.
Но всегда есть исключения. Сегодня мы хотим, чтобы вы поняли работу, которую мы проделали за последние несколько месяцев, и почему мы с таким энтузиазмом начинаем выпуск новой версии 17. Пришло время поделиться с вами удивительно технической темой. CSS Grid Layout.
«Что такое CSS Grid Layout?»
CSS Grid Layout - самая мощная из доступных на сегодняшний день систем для создания макетов CSS для веб-страниц.
Это позволяет вам позиционировать контент как по горизонтали, так и по вертикали с большей точностью, и позволяет действительно легко управлять тем, как страницы адаптируются к размерам окна браузера пользователя и / или экранов их устройств. Все время сохраняя семантическую структуру вашего контента.
Если вы хотите узнать больше, есть много доступных онлайн-ресурсов. Хорошей отправной точкой является: https://css-tricks.com/snippets/css/complete-guide-grid/
«Хорошо, но какое отношение CSS Grid Layout имеет к WebSite X5?»
Вот и все: мы переработали внутренний движок WebSite X5, который отвечает за создание страниц, путем интеграции CSS Grid Layout.
Как и в автомобиле, двигатель - это ядро всей конструкции, которая заставляет все работать. Планирование и разработка с нуля с использованием новой технологии было захватывающей задачей, которую мы взяли на себя несколько месяцев назад. И версия 17 - это только начало того, чего мы можем достичь с ее помощью.
«Не могли бы вы в нескольких словах объяснить, что означает модернизация механизма создания страниц в WebSite X5 с помощью CSS Grid Layout?»
Это значит:
+ скорость
+ гибкость
+ точность
+ совместимость
Чтобы помочь вам понять, давайте сделаем шаг назад и посмотрим, как работал механизм создания страниц до версии 16.
По сути, макеты страниц были определены с использованием сетки, которая была введена в движок. Затем двигатель моделировал, как содержимое будет загружаться, чтобы измерить соответствующие высоты самого содержимого. Основываясь на этих значениях, движок затем приступит к созданию страницы для предварительного просмотра на месте или публикации в Интернете.
Как вы можете себе представить, эти фоновые симуляции и расчеты имели свою стоимость, как с точки зрения вычислительных ресурсов, так и с точки зрения времени, которое они затратили на выполнение. Кроме того, они будут округлять свои расчеты высоты объектов, что может привести к неточному выравниванию на странице, а в некоторых случаях приведет к небольшим различиям между макетами страниц, просматриваемыми в разных браузерах.
Использование CSS Grid Layout решает эту проблему в корне, потому что это позволяет программному обеспечению создавать макеты страниц без необходимости выполнять какие-либо операции фонового моделирования или измерения. Это делает новую версию WebSite X5 более быстрой и стабильной. Кроме того, высоту содержимого больше не нужно вычислять, что делает макет более точным независимо от использования различных браузеров.
Согласно нашим планам, это также поможет нам достичь важных вех в наших будущих версиях.
«Помимо улучшения производительности WebSite X5, добавляет ли CSS Grid Layout какие-либо другие преимущества?»
Да, один из которых вы уже видите в версии 17. Остальное будет показано в следующих версиях.
Благодаря CSS Grid в версии 17 появилась крайне востребованная функция: возможность включать контент полной ширины, то есть контент, который всегда расширяется для всего окна браузера.
Теперь создать галерею изображений или карту полной ширины очень просто: просто выберите объект и нажмите новую кнопку «Развернуть» на панели инструментов над сеткой макета страницы.