Html коды крутые. Коды символов HTML. Как работает HTML-код

В комментариях одной из статей по CSS3 меня спросили: «В каких браузерах возможно реализовать CSS3 свойства?». И здесь можно было бы ответить, что на сегодняшний день многие функции CSS3 можно реализовать в Firefox, Konqueror, Opera или Safari/Webkit. Однако, в каждом браузере поддержка CSS3 на данный момент существует не на 100% процентов, и набор свойств может отличатся в зависимости от браузера. Так в каких же браузерах и как реализована поддержка CSS3?

Чтобы ответить на этот вопрос, мы обратимся к самим создателям браузеров. В сегодняшнем посте мы начнем с рассмотрения возможностей реализации CSS3 в браузере Safari, а соответственно и других браузерах которые используют последние версии движка WebKit. Ниже представлен перевод официального описания возможностей CSS3 от разработчиков Safari. Итак, приступим…

Вы можете вывести на качественно новый уровень ваши веб-проекты, используя передовые возможности CSS3 в Safari и WebKit. Уточним, WebKit — это движек рендеринга, который используется в браузере Safari на Mac OS X, Windows и OS iPhone.

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

Префикс -webkit который будет использоваться в этой статье, указывает какому типу браузера соответствует CSS правило, но данный префикс не является стандартом W3C, то есть CSS с таким префиксом не пройдет валидацию на соответствие CSS2.1. Например, свойство box-shadow является частью разрабатываемого CSS3 стандарта. И для браузеров на основе Mozilla используется префикс -moz , чтобы определить его именно для данного браузера.

Простое создание теней

Для начала посмотрим, насколько просто добавить тень к любому элементу веб-страницы. Фрагмент кода ниже создает изображение, которое немного наклонено и отбрасывает тень. Оба этих эффекта добавляются с помощью CSS.

1 2

Свойство transform поворачивает картинку, а свойство box-shadow собственно добавляет тень позади изображения. Вы можете изменить размер вращения или параметры тени, просто изменяя параметры в CSS.

Попробуйте, и вы уведите повернутое изображение, как показано в примере ниже.

Рисунок 1: Вращение изображения и создание тени используя CSS3.

В примере CSS прописан через style инлайном, но вы можете вынести правило через класс в отельный файл стилей.

Раньше для того чтобы сделать тень вам нужно было использовать специальные хитрые приемы. Теперь с CSS3 вы можете сделать это прямо в браузере, и это выглядит здорово.

Roll Over Pop Outs — появление изображения на наведение курсора

Следующий пример показывает реакцию изображения на наведение курсора мыши. Для этого используется псевдокласс hover и свойства изменения масштаба. Ниже приведен CSS примера:

1 2 3 4 5

img { -webkit-transform: scale(0.5); } img:hover { -webkit-transform: scale(1); }

При наведении курсора на изображение, оно появляется и становится больше, как это показано ниже.

Рисунок 2. Изображение после наведения курсора

Если убрать курсор, то оно снова уменьшится.

Рисунок 3. Изображение перед наведением курсора

Как вы видите, вы можете добиться этого эффекта с помощью всего лишь нескольких строк CSS.

Анимация изображения на наведение курсора

Еще одним распространенным приемом веб-разработчиков является смена двух изображений, когда пользователь наводить курсор на картинку. В этот примере, изображения не просто сменивают друг друга, но пи этом добавляется эффект затухания. Ниже приведен CSS примера:

1 2 3 4 5 6 7 8 9

div.swapper img { -webkit-transition: opacity 1s ease-in-out; } img.img1 , div.swapper : hover img.img2 { opacity : 1.0 ; } div.swapper : hover img.img1 , img.img2 { opacity : 0 ; }

div.swapper img { -webkit-transition: opacity 1s ease-in-out; } img.img1, div.swapper:hover img.img2 { opacity: 1.0; } div.swapper:hover img.img1, img.img2 { opacity: 0; }

Здесь свойство transition используется для обозначения всех параметров перехода. Первый параметр определяет вид анимации, второй определяет время, а третий определяет функцию перехода. ease-in-out является лишь одной из функций перехода, которые есть в вашем распоряжении. Вы можете также назначить линейные изменения, ease in, ease out, или более сложную cubic Bezier (куб Безье) трансформацию.

Вы можете поэкспериментировать с этими эффектами наводя курсор на картинку, вы получите эффекты, как показано на рисунке ниже.

Рисунок 4. Действие над объектом на наведение курсора с эффектом затухания. Но на картинке это показать сложно

Представьте себе: переходы с затуханием без использования JavaScript!

Макеты в несколько колонок с помощью CSS

Получение колонок на веб-страницах, используя чистый CSS вместо HTML таблиц. С того времени как CSS3 свойства для создания колонок реализованы в Safari и WebKit, вы можете четко определить число столбцов и расстояние между ними, чтобы точно отформатировать свой макет. Посмотрите на CSS в код ниже.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{ -webkit-column-count: 3 ; -webkit-column-gap: 25px ; -moz-column-count: 3 ; -moz-column-gap: 25px ; column-count : 3 ; column-gap : 25px ; } Column A Column B Column C

#columns { -webkit-column-count: 3; -webkit-column-gap: 25px; -moz-column-count: 3; -moz-column-gap: 25px; column-count: 3; column-gap: 25px; }

Этот код определяет, что HTML в блоке с классом.columns должен быть представлен в трех колонках. Каждый параграф в собственной колонке.

Этот код также иллюстрирует соответствующий страхующий механизм, который используется когда применяются СSS свойства, которые еще не являются частью W3C стандарта. Этот код определяет column-count и column-gap свойства, как с префиксом -webkit и -moz , так и без них. Это означает, что этот код будет работать в Safari и WebKit, а также в Mozilla браузерах, которые поддерживают эти свойства, и будет продолжать работать после того, как CSS3 стандарты будут приняты, и потребность в префиксах отпадет.

Рисунок 5. Простая реализация нескольких колонок

При таком подходе, параграфы будут показаны один за другим, если браузер не поддерживает данное свойство. Как упоминалось ранее в этой статье, эти приемы несколько иначе, но работают в браузерах, которые не поддерживают эти свойства.

Закругленные углы с CSS

Закругленные углы зачастую проблематично реализовать на HTML-страницах, так как они обычно делаются с использованием небольших изображений для каждого уголка и их последующим позиционированием или укладкой, что может вызвать проблемы рендеринга. Свойство border-radius в CSS3 поддерживается WebKit, и позволяет легко создавать закругленные углы всего лишь несколькими строками CSS. Этот метод проиллюстрирован ниже.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#boxes div { border : 2px solid black ; padding : 10px ; margin : 5px ; width : 200px ; text-align : center ; background : #eee ; } All sides Opposite corners Top Side

#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px; text-align:center; background:#eee; } All sides Opposite corners Top Side

Стили разметки определяют, что все блоки (div) внутри контейнера с классом.boxes должны иметь одинаковый бордер, отступы, ширину, фон и так далее. Далее каждому из отдельных блоков инлайн стилем прописаны разные радиусы для бордера. Вы сможете увидеть результат ниже.

Рисунок 6 . Закругленные углы с помощью CSS

В первом блоке border-radius задан для всех углов. Во втором блоке он установлен для правого верхнего и левого нижнего углов. Третий блок выведен в виде таба с закруглением только верхних углов. И у последнего блока закруглены только правые нижний и верхний углы.

Новые виды управления в формах

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

1 2 3 4

gradient button aqua button

gradient button

aqua button

Вы можете увидеть иллюстрации этих элементов контроля ниже.

Рисунок 7. Некоторые новые типы элементов контроля имеющиеся в WebKit

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

Простой бокс-слайдер

Заключительный пример, простой pop-out блок, который использует некоторые визуальные эффекты доступные в WebKit. CSS и JavaScript код для этого примера приведены ниже.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

#box1 { z-index: 100; position:absolute; top:5px; left:5px; width:100px; height:250px; padding:5px; -webkit-border-radius:10px; border: 2px solid black; background: #dddddd; z-index: 200; } #slider { z-index: 100; position:absolute; top:30px; left:5px; height:200px; width:90px; padding-top:10px; padding-left:15px; -webkit-border-radius:10px; border: 1px solid black; background: #eeeeee; -webkit-transition: -webkit-transform 0.5s ease-in; } function popout() { document.getElementById("slider").style.webkitTransform = "translate(105px,0)"; }

Есть родительский бокс и бокс-слайдер, который находится под ним. Свойство transition бокса-слайдера определяет, что преобразования должны занимать пол секунды и использовать ease-in функцию тайминга. JavaScript триггеры определяют параметры слайдера, когда пользователь нажимает на ссылку. Это означает, что анимация применяется лишь после того, как пользователь выполняет действия — нажатие на ссылку «Popout».

HTML код для этого примера приведен ниже.

1 2 3 4 5 6

Slider Content Popout

Slider
Content Popout

Вы можете поиграть с этим примером, как показано на рисунке ниже.

Рисунок 8. Слайдер до выпадания бокса

Рисунок 9. Слайдер после того, как он появляется

Большая часть функциональности здесь осуществляется с помощью CSS, и только запускается JavaScript.

Для многих из нас, разработчиков, WebKit - черный ящик . Мы бросаем в него HTML, CSS, JS и кучу изображений, и WebKit, как-то… магически, выдает нам веб-страницу, которая выглядит и работает хорошо.
Но на самом деле, как говорит мой коллега Илья Григорик :

Веб-кит не является черным ящиком. Это - белый ящик. И не просто белый, но и открытый ящик.

Так-что, давайте попробуем разобраться в некоторых вещах:

• Что такое WebKit?
• Чем WebKit не является?
• Как WebKit используется WebKit-браузерами?
• Почему WebKit-ы не одинаковые?

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

Стандартные компоненты веб-браузера

Давайте перечислим несколько компонентов современных браузеров:

• Парсинг (Разбор HTML, XML, CSS, Javascript)
• Макет (Layout)
• Рендеринг текста и графики
• Декодировка изображений
• Взаимодействия с GPU
• Доступ к сети
• Аппаратное ускорение

Какие из них общие для всех WebKit браузеров? В значительной степени только первые два.

Остальные компоненты каждый WebKit «порт» реализует по своему. Давайте разберемся что это значит.

WebKit порты

Существует множество WebKit «портов», и я предоставляю Ария Хидаят, WebKit хакер и тех. директор в Sencha право рассказать об этом :

Самым популярной ассоциацией к понятию WebKit, обычно является вид WebKit-а от Apple"s, который работает на Mac OS X (первая и оригинальная WebKit библиотека). Как вы можете догадаться, различные интерфейсы реализованны, используя различные нативные библиотеки Mac OS X, в основном сосредоточенные в компоненте CoreFoundation . Например, если вы определяете цветную плоскую кнопку, с особым радиусом контура, WebKit знает где и как рисовать эту кнопку. В тоже время, окончательная отрисовка кнопки (в виде пикселей на мониторе пользователя) ложиться на плечи CoreGraphics .

Как я упоминал выше, используемый CoreGraphics, уникален для каждого WebKit порта. Chrome для Mac-а, к примеру, использует Skia .

В какой-то момент, WebKit был «портирован» под разные платформы, как десктопные, так и мобильные. Такая вариация обычно называется «WebKit порт». Для Safari Windows, Apple также самостоятельно портировала WebKit для запуска под Windows, используя своей (с ограниченной реализацией) CoreFoundation библиотеки.

… не смотря на факт, что Safari под Windows теперь мертв .

Кроме этого, также было множество других «портов» (см. полный список). Google создал и продложает поддерживать свой Chromium порт. Также существует WebKitGtk, основанный на Gtk+. Nokia (а теперь Trolltech, который перекупил его) поддерживает WebKit Qt порт, который стал популярен в качестве QtWebKit модуля .

Некоторые порты WebKit

• Safari
  - Safari под OS X и Safari под Windows два разных порта
  - Ночная сборка WebKit это сборка исходного кода Mac «порта», который используется для Safari, только новее
• Мобильный Safari
  - Развивался в приватной ветке, но позднее был открыт .
  - Chrome под iOS (использует Apple’s WebView; чуть позже о разнице)
• Chrome (Chromium)
  - Chrome под Android (использует непосредственно «порт» Chromium)
  - Chromium также является основой для браузеров: Yandex , , Sogou , и скоро, Opera.
• Android браузер
  - Использует последний исходный код WebKit, доступный на момент релиза.
• Еще большее количество портов : Amazon Silk, Dolphin, Blackberry, QtWebKit, WebKitGTK+, The EFL port (Tizen), wxWebKit, WebKitWinCE, etc

Разные порты могут фокусироваться на разных задачах. Фокус Mac порта - разделение между браузером и операционной системой, и предоставление биндигов Obj-C и С++ для встраивание рендеринг движка в нативные приложения. Фокус Chromium порта - всецело на браузере. QtWebKit предлагает свой порт использовать вместе со своей кросс-платформенной архитектурой приложений, в качестве движка для рендеринга.

Что общее во всех WebKit браузерах

Для начала давайте рассмотрим общие функции, которые используются во всех WebKit-браузерах:

Знаете это смешно, я сделал несколько попыток, чтобы написать этот абзац. И каждый раз члены команды Chrome поправляли меня, как вы увидите…

И так, во первых, WebKit разбирает HTML одинаково. Ну, за исключением того, что Chromium единственный порт, на данный момент, где включена поддержка потоков для разбора HTML .

… Хорошо, но после разбора HTML, DOM дерево конструировается одинаково. Ну, на самом деле Shadow DOM включен только для Chromium порта, тоесть построение DOM-а варьируется. Тоже для кастомных элементов.

… Хорошо, WebKit создает window и document объекты для всех одинаково. Правда, хотя свойства и конструкиии которые они предоставляют, могут зависит от использования переключателей функций (feature flags).

… Разбор CSS одинаков. Поедание вашего CSS и преобразование его в CSSOM довольно таки стандартно. Ага, хотя Chrome поддерживает только -webkit- префиксы, когда Apple и другие браузеры поддерживают устаревшие префиксы -khtml- и -apple-.

… Макет… позиционирование? Это же как хлеб с маслом. Везде одинаково, правильно? Ну уже! Субпиксельный макет и насыщенная макетная арифметика является частью WebKit, но отличается от порта к порту.

Супер.

Так что, это сложно.

Теперь, давайте попробуем подвести итог, что общего в мире WebKit…

Что общего для каждого WebKit порта.

• DOM, window, document
  более или менее
• CSSOM
• Разбор CSS, свойство/значение
  различия в префиксах производителей
• Разбор HTML и построение DOM
  Одинаково, если мы забудем про Web Components.
• Макет и позиционирование
  Flexbox, Floats, block formating context… все общее
• Инструменты пользовательского интерфейса, и инструменты разработчика, типа Chrome DevTools он же WebKit inspector.
  Хотя с прошлого апреля, Safari использует свой собственный Safari инспектор, не-WebKit, с закрытыми исходниками.
• Такие функции как contenteditable, pushState, File API, большенство SVG, математика CSS трансформаций, Web Audio API, localStorage
  Хотя реализация может отличаться. Каждый порт может использовать свою собственную систему хранения для localStorage и может использовать разное audio API для Web Audio API.

Становится не совсем понятно, поэтому давайте попробуем взглянуть на некоторые различия.

Теперь, что не является общим для WebKit портов:

• Все связанное с GPU
  - 3D трансформации
  - WebGL
  - Декодирование видео
• Отрисовка 2D на экран
  - Технологии сглаживания
  - Рендеринг SVG и CSS градиентов
• Рендеринг текста и переносы
• Сетевые технологии (SPDY, пре-рендеринг, WebSocket транспорт)
• JavaScript движок
  - Движок JavaScriptCore лежит в репозитории WebKit. Но существуют биндинги в WebKit и для него, и для V8.
• Рендеринг элементов форм
• Поведение тэгов video и audio и поддержка кодеков
• Декодирование изображений
• Навигация назад/вперед
  - Часть pushState()
• SSL функции, такие как Strict Transport Security и Public Key Pins

Давайте взглянем на один из них: 2D графика зависит от порта, мы используем совершенно разные библиотеки для рендеринга на экран:

Или если вдаваться в подробности, недавно добавленная функция: CSS.supports() была включена для всех портов, за исключением win и wincairo, для которых не включены условные функции css3 (css3 conditional features).

Теперь, мы вдаемся в технические подробности… время стать педантичным. Даже сказанное выше не совсем корректно. На самом деле это WebCore, является общим компонентом. WebCore это макет, рендеринг, и DOM библиотека для HTML и SVG, и в основном то, что люди думают, когда они говорят WebKit. В самом деле «WebKit» технически - это слой биндингов между WebCore и «портами», хотя в обычной беседе это различие в основном не важно.

Диаграмма должна помочь:

Многие из компонентов WebKit переключаемые (показаны серыми).

Например, JavaScript движок WebKit-а, JavaScriptCore, является движком по-умолчанию в WebKit. (Изначально он основан на KJS (от KDE) с дней: когда WebKit начинался как ответвление KHTML. В тоже время, Chromium порт, переключается на V8 движок, и использует уникальные DOM биндинги.

Шрифты и рендеринг текста являются очень большой частью платформы. Существует 2 отдельных пути для текста в WebKit: Быстрый и Сложный. Оба требуют поддержку специфичную для платформы (реализованную на стороне порта), но Быстрый только должен знать как блитировать глифы (которые WebKit кэширует для платформы), когда Сложный полностью переносит рендеринг строк на уровень платформы и просто говорит «нарисуй это, пожалуйста».

«WebKit это как сэндвич. В прочем, в случае Chromium, это больше как тако. Вкусное тако из веб-технологий.
Dmitri Glazkov, Chrome WebKit hacker. Champion of Web Componets, and shadow dom.

Теперь, давайте расширим обзор, и посмотрим на несколько портов и несколько подсистем. Ниже представлены пять портов WebKit, обратите внимание, как различается набор инструментов для каждого из них, несмотря на общие компоненты:

Chrome (OS X) Safari (OS X) QtWebKit Android Browser Chrome for iOS Rendering Networking Fonts JavaScript

Skia	CoreGraphics	QtGui	Android stack/Skia	CoreGraphics
Chromium network stack	CFNetwork	QtNetwork	Fork of Chromium’s network stack	Chromium stack
CoreText via Skia	CoreText	Qt internals	Android stack	CoreText
V8	JavaScriptCore	JSC (V8 is used elsewhere in Qt)	V8	JavaScriptCore (without JITting) *

* Сноска про Chrome для IOS. Он использует UIWebView, как вы вероятно знаете. В соответствии с возможностями UIWebView, это означает что он может использовать только такой же рендеринг движок, как и Мобильный Safari, JavaScriptCore (а не V8) и однопоточную модель. Тем неменее, некоторый код заимствован из Chromium, такой как подсистема для работы с сетью, синхронизация инфраструктура закладок, omnibox, метрики и отчеты о сбоях (crash reporting). (Также, JavaScript на столько редко является узким местом на мобильных устройствах, что отсутствие JITting компилятора имеет минимальное влияние.)