Перевод статьи «HTML Imports #include for the web», Eric Bidelman.
Ссылка на первую часть перевода.
HTML-импорт упрощает загрузку и повторное использование кода. В частности, это хороший способ распространения веб-компонентов. Это касается как простых HTML <template>, так и полноценных кастомных элементов с теневым DOM [1, 2, 3]. Когда эти технологии работают вместе, импорт становится инструментом для подключения веб-компонентов.
Читать полностью »
Перевод статьи «HTML Imports #include for the web», Eric Bidelman.
Недавно я перевел статью по основам HTML Import. Я обещал, что если эта тема заинтересует хабра-сообщество, то переведу более подробную статью. Я решил разбить перевод на две одинаковые по размеру части, так как, по моему, на одну часть слишком много буков. Вторая часть выйдет спустя несколько дней после публикации этой части. Если, конечно, эта часть более-менее понравится хабра-сообществу.
Давайте поговорим о том, как мы загружаем различные ресурсы. JavaScript мы загружаем при помощи <script src>. Для CSS у нас есть <link rel="stylesheet">. Для изображений <img>. Для видео есть <video>. Для аудио — <audio>… Давайте ближе к сути! Для большинства видов контента есть простые способы его подгрузки. Но не для HTML. Для HTML у нас есть следующие варианты:
<iframe> — испробованный и рабочий, но тяжеловесный способ. Контент iframe'а живет в отдельном от главной страницы контексте. Хоть это и хорошая особенность, она также создает дополнительные трудности: подгонка размера айфрейма к его содержимому, работа с внутренними скриптами и стилями.xhr.responseType="document", но загрузка HTML при помощи JS не кажется хорошей идеей.<script type="text/html">.
HTML код, это самый простой тип контента, но в этом плане, он требует наибольших усилий. Хорошо, что у нас есть Web Components, они помогут нам справиться с этой и другими проблемами.
Читать полностью »
Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.
Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других HTML страниц.
HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.
Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)
Читать полностью »
Почти два года назад вышла статья «What no one told you about z-index» (и её перевод на Хабре «То, что вам никто не говорил о z-index»), авторы которой рассказывают о малоизвестной (76% проголосовавших пользователей Хабра слышат об этом впервые), но документированной возможности создания нового контекста наложения указав opacity меньше единицы.
В рабочей группе W3C продолжается обсуждение нового расширения для элемента HTMLMediaElement, который предоставляет API для контроля воспроизведения контента в браузере. То есть, непосредственно в браузере появятся встроенные средства DRM, так что правообладатели смогут запрещать/ограничивать воспроизведение фильмов и музыки на компьютерах пользователей.
Хотя новый стандарт ещё не принят окончательно, но правообладатели уже приступили к технической реализации. Интересные подробности этого процесса содержатся во вчерашнем письме Марка Уотсона (Mark Watson) из Netflix. Эта компания является одним из основных разработчиков стандарта, наряду с Google и Microsoft.
Марк Уотсон объяснил, что сейчас ряд вендоров работают над разработкой модулей DRM для HTML по заказу правообладателей — медиастудий. Консорциум W3C не ставит целью узнать и опубликовать эти спецификации, а всего лишь стремится предоставить ясные API для доступа к ним из браузера. Поэтому характеристики конкретных модулей DRM являются коммерческой тайной и держатся в секрете.
Читать полностью »
Доброго времени суток уважаемые читатели. На сегодняшний день с помощью CSS можно создать множество различных элементов. Это безусловно очень радует, вспоминая веб несколько лет назад. Но порой так «устаешь» от всех этих изощрений с :before и :after… Недавно я нашел две интересных спецификации CSS Masking Level 1 и CSS Shapes Level 2, благодаря которым в недалеком будущем перед нами откроются совершенно новые возможности оформления контента и разработки форм элементов.
Все современные браузеры поддерживают свойства mask и clip-path, как определено в SVG 1.1 для элементов SVG. Но только Firefox позволяет применять эти свойства к HTML элементам, причем без префиксов. Но говоря конкретно про спецификацию CSS Masking, то свойства mask, clip-path, mask-box-image поддерживаются только на последних Webkit/Blink с префиксом webkit.
Свойство clip-path создает область отсечения для любого из HTML элементов или графических элементов, в том числе элементам-контейнерам SVG — clipPath. Образовавшиеся элементы возможно анимировать. Одно впечатляющее демо (к сожалению работает только на последних Chrome).
Читать полностью »
Рабочая группа Руководства по обеспечению доступности веб-контента (WCAG) 2.0 опубликовала в качестве информационного примечания W3C Руководство по применению WCAG 2.0 для информационных и коммуникационных технологий вне веб (WCAG2ICT).
Читать полностью »
Все любят Google, я согласен с каждым из перечисленных под катом «фактом о Google» на все 100. Так случилось, что мой любимый браузер Opera недавно был вытеснен этой корпорацией добра с рынка, то есть стерт с лица земли. Подробнее. Моей злобы и пассионарности хватило, чтобы «никак не угомониться» и написать второй пост, который ты можешь прочитать, если захочешь увидеть непопулярную точку зрения (против Google), немного оскорбляющую собой данное сообщество.Читать полностью »
Не так давно на хабре обсуждалась новая инициатива от W3С — Encrypted Media Extensions или просто EME. Попробуем же разобраться на практике, что нового и интересного нам предлагают.
Читать полностью »
В данной статье рассматривается ситуация, когда элемент, создающий новый блочный контекст форматирования, имеет потомков, имеющих значение свойства float отличное от none. В большинстве статей на данную тему поведение элементов в подобных случаях предлагается принять на веру, поэтому в данной статье акцент делается на обосновании интерпретации браузерами положений спецификации W3C.
Читать полностью »