Чего я ждал от HTML5 и CSS3 / Хабр
Веб разработкой я занимаюсь давно, и помню еще IE3 и NN4.xx. Многое изменилось с тех пор, много воды утекло. Пришло понимание всех технологий не на уровне «HTML — это текстовый файлик, в котором попадаются какие-то слова в скобочках», а понимание логики построения самого языка разметки, его абстракций.Начало разработки спецификаций HTML5 и CSS3 уже не вызывала у меня щенячьего восторга и бурной радости, а воспринималась как вполне эволюционное событие. Заглядывал я в рабочие черновики изредка, отмечая для себя основные направления развития. Но чем больше спецификации приближаются к финалу, тем страшнее мне становится. Это не то направление развития, которое требует рынок!
Возникает резонный вопрос, куда делись все те люди, которые разрабатывали стандарты 10 лет назад? Куда делись инновации? Почему w3c создает стандарт, который, по некоторым меркам, уже устарел?
Давайте разберемся.
HTML5
Одними из самых непонятных мне тегов являются del и ins.
Они грязным хаком прошли по всей структуре языка, имея при этом весьма сомнительную пользую. Попытки перенести логику офисных документов на веб-страницу закончатся полным фиаско. Почему? Да очень просто! Если вам нужно получить историю изменений документа, то сделать это можно внешними программами, не перенося этот функционал внутрь языка. История правок нужна менее чем одной сотой доле процента пользователей, все остальные спокойно довольствуются текущей актуальной версией данных на момент поиска информации. Парсинг кода с учетом этих двух «замечательных» тегов будет сплошным негативом, потому что нарушается стройность и логичность языка, его предсказуемость.Второй прикол, это попытка всунуть в HTML вещи, которые нельзя было туда добавлять ни в коем случае. Это атрибуты contenteditable, draggable и прочие интерактивы. Это должно быть вынесено в CSS, DOM, куда угодно, только не в HTML. Это интерактивы, а не разметка. Интерактив должен быть управляемым, и для управления есть замечательный JS и великолепный CSS.
Третий прикол, это жалкие попытки структурировать документ, путем введения дополнительных структурных элементов. Это просто цирк какой-то. За эти слова в меня будут кидаться тапками, но, надеюсь, ряд людей поймет, почему я так говорю. Отойдем от этой темы в сторону и порассуждаем о том, зачем же нужен HTML. А нужен он для того, чтобы сделать разметку некой информации. На данный момент времени разметка включает не только контент, но и дизайнерские изыски. Итак, у нас есть мухи отдельно (структуры, которые нужны для оформительских целей), и котлеты отдельно (непосредственно сам контент). Для контента HTML подходит на ура, а вот с дизайнерскими изысками большие проблемы. Да и с логическими структурами страницы тоже проблемы. У одного на сайте меню, сайдбар и контент, а у второго — шапка с главным меню, второстепенное меню, два сайдбара слева и справа, рекламный бокс, список товаров и прочее. Как их подружить? Да легко! Нужно всего лишь позволить придумывать свои теги! XML для оформления страницы, HTML — для оформления контента.
Насоздавали всевозможные типы форм ввода. Забыли только придумать, как это все богатство стилизовать. Понимаю, что однообразие интерфейса важная вещь, но стилизация может быть как позитивным, так и негативным фактором в развитии веб-интерфейсов. Рынок требует этого, значит нужно это делать.
Вот мы и подошли плавно к теме CSS3
CSS3
Продолжим тему веб-форм. Рынок веб-интерфейсов ожидает контроллируемую стилизацию полей ввода. На практике это означает, что я хочу из любого элемента сделать любое поле ввода. Я хочу сделать чекбокс со своим собственным дизайном, хочу сделать селектбокс со своим оформлением, каждую опцию создавать из своей собственной XML-структуры и так далее.
Что мы видим в рабочем варианте спецификации? А ничего.Темплейты отображения (Template Layout) сперва меня вдохновили, потом, после моделирования реальных ситуаций, я понял, что это работать не будет вообще. Если контент статичен, то такой подход работать будет. Но как только появляется динамика…
Вернемся еще к одной очень важной вещи, под названием точка отсчета. Точка отсчета на данный момент времени выбрана одна — левый верхний угол. Рассчет позиции того же фона ведется именно из этого места. Но в мире существуют не только те, кто читает слева направо, а еще и те, кто читает справа налево, сверху вниз и так далее. Теперь попробуйте без костылей сделать мультиязыковый дизайн. А решение проблемы у всех под носом — нужно всего лишь изменить точку отсчета, и позиция фона для жителей Саудовской Аравии, чудным образом осталась бы неизменной, например 10px 10px, и находилась бы в верхнем правом углу, ровно на данное смещение. Развивая идею с точкой отсчета, можно обнаружить более управляемый контроль позиции абсолютных элементов, контроль трансформации объектов и много полезного. Но этого я не нашел в спецификации.
Перечислять неувязки можно долго. Не думайте, что моя задача очернить работу w3c, там работают очень умные люди.
Просто за время создания новой спецификации часть изначальных целей перестала быть актуальной. Рынок развивается очень быстрыми темпами, и от w3c требуется больше интерактива с разработчиками. Моя же основная цель — заставить людей задуматься над тем, что они делают и как они думают.
UPD: Огромное спасибо всем за позитивную и негативную карму!
UPD2: Изменил абзац про темплейты отображения
CSS | MDN
Cascading Style Sheets (CSS) — это язык иерархических правил (таблиц стилей (en-US)), используемый для представления внешнего вида документа, написанного на HTML или XML (en-US) (включая различные языки XML, такие как SVG
CSS является одним из основных языков свободной веб-разработки, который стандартизован спецификацией W3C.
Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а CSS3, разбитый на более мелкие модули, развивается на пути стандартизации.
- Справочник по CSS Исчерпывающий справочник для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.
- Самоучитель по CSS Пошаговое руководство для помощи начинающим программистам CSS. Содержит все необходимые основы.
- Примеры CSS3 Набор примеров представляющий новейшие технологии CSS в действии: толчок к креативности.
- Ключевые понятия CSS
Описание синтаксиса и внешнего вида языка (en-US) и введение в фундаментальные понятия такие как специфичность (en-US), наследование(каскадирование) (en-US), блочная модель(box-model) и схлопывание отступов(margin-collapse (en-US)), наложение (en-US) и контекст форматирования(Block formatting context
Кроме того, описана краткая форма записи (en-US) свойств CSS.- Руководство разработчика CSS (en-US)
Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.
- Распространённые вопросы по CSS
Ответы на часто возникающие вопросы о CSS.
Кроме того, описана краткая форма записи (en-US) свойств CSS.- Служба проверки W3C CSS проверяет правильность работы вашего CSS кода. Служба OnlineWebCheck.com делает то же самое. Это отличные инструменты для отладки.
- Инструменты разработчика Firefox позволяют рассматривать и изменять «на лету» CSS страницы с помощью инструментов Инспектор и Редактор таблиц стилей.
- Расширение Firebug для Firefox, популярное расширение для этого браузера, которое также позволяет редактировать «на лету» CSS код при просмотре сайтов. Помогает легко тестировать работу кода при внесении различных изменений.
- Расширение Web Developer для Firefox позволяет отслеживать и изменять «на лету» CSS код на просматриваемых сайтах. Проще чем Firebug, но обладает меньшей функциональностью.
- Прочие инструменты CSS. (en-US)
- Изучение CSS от Mozilla.
- Веб-языки для которых часто применяется CSS: HTML, SVG, XHTML, XML (en-US).
- Технологии Mozilla, широко использующие CSS: XUL, Firefox, а также Thunderbird расширения и темы.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on by MDN contributors.
CSS3. Информация — все, что вам нужно знать о CSS3
201505 май
Рабочая группа CSS зашла в тупик по вопросу процентных отступов (и отступов) в гибком макете и макете сетки, и ей нужен ваш вклад, чтобы решить его.
Вариант 1. Элементы Flex и Grid разрешают проценты в полях сверху и снизу по отношению к высоте блока, содержащего элемент.
Вариант 2: Элементы Flex и Grid разрешают проценты в полях сверху и снизу по сравнению с ширина блока, содержащего элемент.
Вариант 1 делает вертикальные поля согласованными с горизонтальными полями (которые определяют проценты относительно ширины блока, содержащего элемент). Это теоретически более простая модель, и она хорошо работает с концепциями компоновки Flexbox и Grid, не зависящими от размеров. Однако это несовместимо с компоновкой блоков CSS и приводит к схлопыванию полей до нуля при использовании в контейнере с автоматической высотой.
Вариант 2 соответствует поведению вертикальных полей в макетах блоков и таблиц. Он имеет полезное поведение в полях с автоматической высотой и позволяет «взломать соотношение сторон». Однако это менее очевидное поведение и означает, что взаимодействие с макетом меняется в зависимости от того, является ли флексбокс «строкой» или «столбцом».
(Дополнительную информацию см. в обсуждении www-style.)
Мы ждем комментариев от авторов, объясняющих, какое поведение, по их мнению, лучше для макетов Flex и Grid и почему. Есть ли у вас варианты использования, которые могут быть достигнуты только с тем или иным поведением? Показать нам!
Подробнее »
201419
декабряCSSWG опубликовала обновленный рабочий проект выравнивания блоков CSS уровня 3. Этот модуль расширяет свойства выравнивания Flexbox для применения ко всем моделям макета и добавляет дополнительные элементы управления для логического позиционирования, распределения пространства и обработки переполняющих элементов.
Это модуль вертикального центрирования, народ.
Синтаксис и функциональность этого модуля находятся в процессе стабилизации теперь и нам нужен ваш отзыв . Подумайте обо всех крутых вещах, которые вы могли бы сделать с новыми свойствами выравнивания! Представьте их! Изучите их! Делайте примеры! Пишите разглагольствования! И скажите нам, что круто, а что глупо, чтобы мы могли исправить это , чтобы оно стало лучше до того, как оно будет заблокировано в поставляемых браузерах.
Изменения, внесенные с момента последнего рабочего проекта, перечислены в разделе «Изменения».
Пожалуйста, отправьте отзыв! Прокомментируйте здесь, отправьте сообщение в (архивный) общедоступный список рассылки [email protected] с кодом спецификации (
[css-align]) и темой вашего комментария в строке темы, напишите сообщение в блоге и отправьте нам ссылку, или, если вы стесняетесь, напишите напрямую одному из редакторов. Однако разглагольствования где-то еще в эфире и ожидания, что мы найдем его с помощью магии, не сработают.Подробнее »
Страница 1 из 10:
НАШИ СПОНСОРЫ
Реклама здесь?TAG CLOUD
CSS3 Media Queries становится официальной рекомендацией W3C, CSS4 Media Queries обретает форму цикла разработки это началось более десяти лет назад (первый рабочий проект спецификации был опубликован 4 апреля 2001 г.).
CSS3 Media Queries, которые позволяют адаптировать представление контента к определенному диапазону устройств вывода, например, представлять веб-сайт по-разному в зависимости от размера экрана или соотношения сторон устройства, которое использует посетитель, стали одним из самые обсуждаемые аспекты CSS3 в последние месяцы, поскольку концепция адаптивного дизайна набирает обороты, в основном в результате быстрого роста числа различных платформ (и разрешений экрана), на которых пользователи теперь выходят в Интернет, например смартфоны.
, планшеты и даже телевизоры с доступом в Интернет.
Media Queries — это лишь четвертый модуль CSS3, достигший стадии разработки рекомендаций на сегодняшний день, и первый в этом году, присоединившийся к модулям CSS3 Selectors, CSS3 Color и CSS Namespaces, которые в прошлом году стали официальными рекомендациями W3C.
CSS4 Media Queries
Работа над следующим воплощением модуля Media Queries, CSS4 Media Queries, уже началась. Первый редакционный черновик был обнародован ранее в этом году. В то время как модуль CSS3 Media Queries в основном ориентирован на возможность изменения представления контента для разных размеров и разрешений экрана, CSS4 Media Queries, похоже, настроен на работу с различными методами ввода и другими возможностями различных устройств, а также позволяет различать представление в зависимости от возможности устройства. На данный момент в спецификацию были добавлены три новые мультимедийные функции, а именно:
- сценарий
- указатель
- наведение
Медиа-функция «сценарий»
Мультимедийная функция « скрипт » может использоваться для запроса того, поддерживается ли ECMAscript (например, JavaScript или ActionScript) в текущем документе.
Если пользовательский агент поддерживает ECMAscript и эта поддержка активна для текущего документа, значение должно быть равно 1. В противном случае значение должно быть равно 0.
точное определение того, какой скрипт разрешен к запуску.
Дополнительную информацию о мультимедийной функции « script » можно найти в разделе 4.14 проекта редактора здесь.
Медиа-функция «указатель»
Медиа-функция « указатель » может использоваться для запроса наличия и точности указывающего устройства, такого как мышь.
Медиа-запрос « указатель » принимает следующие значения:
- «нет» — механизм ввода устройства не включает указывающее устройство.
- «грубый» — механизм ввода устройства включает манипулятор ограниченной точности.
- «хорошо» — механизм ввода устройства включает в себя устройство точного наведения.
Согласно спецификации, как « грубый », так и « точный » указывают на наличие манипулятора, но отличаются по точности.
Указательное устройство, с помощью которого было бы трудно или невозможно надежно выбрать одну из нескольких небольших соседних целей, например, устройство с сенсорным экраном, будет квалифицировано как «9».0055 грубый ’.
Спецификация предоставляет следующий пример медиа-запроса с использованием медиа-функции ‘ pointer ‘:
/* Увеличьте размер переключателей и флажков, если у нас неточное указывающее устройство */
@media (pointer:coarse) {
input[type=»checkbox»], input[type=»radio»] {
min-width:30px;
мин-высота: 40px;
фон:прозрачный;
}
}
Дополнительную информацию о мультимедийной функции pointer можно найти в разделе 4.15 черновика редактора здесь.
Медиа-функция «зависание»
Медиа-функция « зависание » может использоваться для запроса того, способна ли основная система наведения, используемая на устройстве вывода, зависать. Если это так, значение будет 1.