Инструменты веб-разработки. Стилевые возможности по относительному расположению элементов. Подключение шрифтов. Примеры верстки страниц. Работа с графическими редакторами.
Я занимаюсь CSSO. В ходе работы над ним мне пришлось погрузиться в процесс парсинга CSS. В результате парсер (тот, что в CSSO) был не раз переписан. Пришло время сделать его отдельным инструментом.
Новый быстрый детальный парсер CSS, его AST, области применения и кое-что ещё.
<p><a><img src="http://strana-sovetov.com/images/stories/tip/health/calm-the-nerves_big.jpg"></a></p>
<p>Now therefore, if ye have done truly and sincerely, in that ye<br>have made Abimelech king, and if ye have dealt well with Jerubbaal and<br>his house, and have done unto him according to the deserving of his<br>hands; 9:17 (For my father fought for you, and adventured his life<br>far, and delivered you out of the hand of Midian: 9:18 And ye are<br>risen up against my father’s house this day, and have slain his sons,<br>threescore and ten persons, upon one stone, and have made Abimelech,<br>the son of his maidservant,
king over the men of Shechem, because he<br>is your brother;) 9:19 If ye then have dealt truly and sincerely with<br>Jerubbaal and with his house this day, then rejoice ye in Abimelech,<br>and let him also rejoice in you: 9:20 But if not, let fire come out<br>from Abimelech, and devour the men of Shechem, and the house of Millo;<br>and let fire come out from the men of Shechem, and from the house of<br>Millo, and devour Abimelech.<br><br>9:21 And Jotham ran away, and fled, and went to Beer, and dwelt there,<br>for
fear of Abimelech his brother.<br><br>9:22 When Abimelech had reigned three years over Israel, 9:23 Then God<br>sent an evil spirit between Abimelech and the men of Shechem; and the<br>men of Shechem dealt treacherously with Abimelech: 9:24 That the<br>cruelty done to the threescore and ten sons of Jerubbaal might come,<br>and their blood be laid upon Abimelech their brother, which slew them;<br>and upon the men of Shechem, which aided him in the killing of his<br>brethren.<br><br>
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)Ontico
РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 6 июня, 18:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2550.html
Краткая история редактирования текста в браузерах. Родовые проблемы WYSIWYG-редакторов. Типы и функции современных веб-редакторов.
Обработка различных способов ввода (клавиатура, голос, copy&paste, autocomplete/autocorrect, gesture input). Проблемы с использованием contenteditable и execCommand. Браузерные API: Selection, Input Method Editor, Clipboard, MutationObserver, CompositionEvents. Спецификация W3C Input Events.
...
Я занимаюсь CSSO. В ходе работы над ним мне пришлось погрузиться в процесс парсинга CSS. В результате парсер (тот, что в CSSO) был не раз переписан. Пришло время сделать его отдельным инструментом.
Новый быстрый детальный парсер CSS, его AST, области применения и кое-что ещё.
<p><a><img src="http://strana-sovetov.com/images/stories/tip/health/calm-the-nerves_big.jpg"></a></p>
<p>Now therefore, if ye have done truly and sincerely, in that ye<br>have made Abimelech king, and if ye have dealt well with Jerubbaal and<br>his house, and have done unto him according to the deserving of his<br>hands; 9:17 (For my father fought for you, and adventured his life<br>far, and delivered you out of the hand of Midian: 9:18 And ye are<br>risen up against my father’s house this day, and have slain his sons,<br>threescore and ten persons, upon one stone, and have made Abimelech,<br>the son of his maidservant,
king over the men of Shechem, because he<br>is your brother;) 9:19 If ye then have dealt truly and sincerely with<br>Jerubbaal and with his house this day, then rejoice ye in Abimelech,<br>and let him also rejoice in you: 9:20 But if not, let fire come out<br>from Abimelech, and devour the men of Shechem, and the house of Millo;<br>and let fire come out from the men of Shechem, and from the house of<br>Millo, and devour Abimelech.<br><br>9:21 And Jotham ran away, and fled, and went to Beer, and dwelt there,<br>for
fear of Abimelech his brother.<br><br>9:22 When Abimelech had reigned three years over Israel, 9:23 Then God<br>sent an evil spirit between Abimelech and the men of Shechem; and the<br>men of Shechem dealt treacherously with Abimelech: 9:24 That the<br>cruelty done to the threescore and ten sons of Jerubbaal might come,<br>and their blood be laid upon Abimelech their brother, which slew them;<br>and upon the men of Shechem, which aided him in the killing of his<br>brethren.<br><br>
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)Ontico
РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 6 июня, 18:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2550.html
Краткая история редактирования текста в браузерах. Родовые проблемы WYSIWYG-редакторов. Типы и функции современных веб-редакторов.
Обработка различных способов ввода (клавиатура, голос, copy&paste, autocomplete/autocorrect, gesture input). Проблемы с использованием contenteditable и execCommand. Браузерные API: Selection, Input Method Editor, Clipboard, MutationObserver, CompositionEvents. Спецификация W3C Input Events.
...
2. Инструменты быстрой
разработки
• Ctrl + S для быстрого сохранения
• Alt + Tab для переключения между вкладками в ОС
• Ctrl + R, F5 для обновления страницы в браузере
• Ctrl + Shift + I, Ctrl + Shift + C: Использование консоли разработки в
браузере
• Сброс кэша Ctrl + Shift + R при перезагрузке страницы
4. В этом уроке
• Подходы к верстке структуры страницы
• Flexbox
• Директивы
• Работа с графическими редакторами
• Последовательность верстки страницы
5. Расположение элементов
относительно друг друга
• Для расположения элементов относительно друг друга как-либо,
кроме как сверху вниз друг за другом, используется
позиционирование элементов на основе display.
• Существующие подходы к взаимному расположению элементов:
• Табличная верстка (Deprecated)
• CSS Float (Deprecated)
• CSS Inline-block
• CSS Flex
• CSS Grid
6. Свойство display –
дополнительно
Свойство Описание
flex Блочный флекс-контейнер. Ведет себя как блочный, но располагает элементы внутри
себя по флекс-осям
inline-flex Строчный флекс-контейнер. Ведет себя как inline-block.
grid Блочный контейнер для сетки (см. CSS Grid)
table Блочная таблица
inline-table Строчная таблица
table-cell Ячейка таблицы
table-row Строка таблицы
list-item Элемент списка (добавляется маркер)
7. Расположение элементов при
помощи inline-block
• Выстраивание элементов в несколько колонок осуществляется путем задания
этим колонкам display:inline-block и установки этим колонкам нужной ширины
и внешних отступов.
• При использовании этого способа стоит учитывать, что в отступы между
инлайн-блоками будут входить пробелы между тегами.
• При использовании инлайн-блоков требуется задавать им вертикальное
выравнивание при помощи свойства vertical-align.
• Недостаток этого способа в том, что он базируется всё же на расположении
текста и верстка страницы таким способом достаточно долго настраивается.
Кроме того, необходимо вручную вычислять размеры каждой колонки.
9. Расположение элементов при
помощи CSS Flex
• Спецификация CSS Flex разработана для гибкого расположения
элементов внутри флекс-контейнера.
• Для использования этого способа необходимо указать флекс-
контейнер и задать для него правила размещения элементов внутри.
• Этот способ позволяет автоматически комбинировать элементы
внутри контейнера без ёмких вычислений и обработки проблем с
текстовой природой контейнера.
10. Расположение элементов при
помощи inline-block
.wrapper {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
aside {
width: 25%;
}
section {
width: 70%;
}
.images {
display: flex;
align-items: center;
justify-content: space-between;
}
.images .item {
width: 22%;
}
11. CSS Flex
• Внутри Flex-контейнера существуют две оси – главная и побочная.
• Главная ось – ось, вдоль которой будут располагаться элементы.
• Поперечная (побочная) ось – ось, перпендикулярная главной.
12. CSS Flex
Свойство Значения Описание
flex-direction row | column | row-reverse | column-
reverse
По умолчанию row. Указывает направление главной оси.
justify-content Flex-start | flex-end | space-between
| space-around | space-evenly
Выравнивание элементов по главной оси
align-items flex-start | flex-end | center |
stretch | baseline
Выравнивание элементов по поперечной оси
flex-wrap nowrap | wrap | wrap-reverse Указывает, будут ли переноситься элементы в случае
переполнения их на оси, либо же сжиматься.
margin auto | auto <> | <> auto Значение auto для элемента внутри флекс-контейнера
позволяет выровнять его по центру горизонтальной и/или
вертикальной оси.
14. Задача 1.
• Как решать:
• Сделать три глобальные колонки с отступами и ширинами
• Разметить внутри большого блока три контейнера.
• Внутри последнего контейнера большого блока сделать три одинаковых блока в
строку.
• Разметить два контейнера внутри правого блока
• Создать два элемента с блоком и текстом внутри первого из них
• Добавить последний блок.
15. Директива media
• Директива @media
используется для того, чтобы
задать стилевые правила для
различных типов и размеров
экранов.
• Внутри этой директивы после
описания типа и размера
экрана указываются стилевые
правила, которые будут
включены на экранах,
удовлетворяющих директиве.
@media screen and (max-width: 1000px) {
.wrapper {
width: 700px;
}
}
@media screen and (min-width: 1000px) {
.wrapper {
width: 1000px;
}
}
16. Директива font-face
• Директива @font-face
используется для того, чтобы
подключить к странице шрифты,
которых может не быть на
компьютере пользователя, у
которого будет открыта
страница.
• Внутри этой директивы
указываются свойства: название
шрифта, которое будет
использоваться далее в CSS, и
ссылки на файл с
местоположением шрифта
относительно CSS-файла.
@font-face {
font-family: "My Font Name";
src: local("My Font Name"), url("../fo
nts/my-font.ttf");
}
body {
font-family: "My Font Name", Arial;
}
18. Операции в графическом
редакторе
• Во время верстки с графическим редактором необходимо
осуществлять действия:
• Извлечение иконок и картинок для страницы
• Получение размеров элементов на сайте
• Получение внешних и внутренних отступов для элементов
• Получение настроек и названия используемых шрифтов
• Получение цветов элементов страницы
• Эти операции необходимо научиться выполнять в графическом
редакторе перед началом верстки страницы по макету
20. Последовательность верстки
страницы
• Написание HTML-каркаса, подключение стилевых файлов
• Установка глобальных стилей: цвета, шрифты, сбросы, блочная
модель
• Разбиение страницы на структурные компоненты в HTML- коде
(семантические классы). Позиционирование
• Верстка повторяющихся компонентов и выделение им отдельного
класса (UI Kit)
• Разбиение структурных компонентов на интерфейсные в HTML-коде
(интерфейсные классы)
• Верстка интерфейсных компонентов из уже созданного UI Kit
• Отладка верстки
21. Дополнительные материалы
Примеры использования псевдоэлементов
https://habr.com/ru/post/154319/
Собственные стили для полосы прокрутки
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
CSS Float
http://www.css-tricks.ru/articles/css/all-about-floats
CSS Flexbox
https://html5.by/blog/flexbox/
CSS Grid
https://bit.ly/2GZAcQn
Нестатичное позиционирование
https://html5book.ru/css-position
22. Дополнительные материалы (2)
Пример последовательной верстки веб-страницы (+см. комментарии)
https://habr.com/ru/post/202408/
Набор бесплатных шрифтов
https://www.fonts-online.ru/
Подключаемые шрифты от Google
https://fonts.google.com/
CSS Keyframes
https://webref.ru/css/keyframes
CSS Import
https://developer.mozilla.org/en-US/docs/Web/CSS/@import
VSCode приемы работы
https://bit.ly/39bSE4k
CSS Transitions
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_tra
nsitions
Figma Google Material UI Kit
https://www.figma.com/file/8jpq7NtJhG5ldXrlBoMXrA/Google-Material-
Design?node-id=0%3A1
Photoshop бесплатные макеты
https://freebiesbug.com/psd-freebies/website-template/
https://www.os-templates.com/free-psd-templates/
Figma бесплатные макеты
https://www.uistore.design/types/figma/
Видеоурок по использованию Photoshop для верстки
https://www.youtube.com/watch?v=Kmkx3SfJwuc