Классическая сетка для 12 колонок

Сетка разбита на 12 ячеек в ряду, где вы можете равномерно размещать области на дорожках. Сетка 12 колонок Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat(). Например использование: repeat(12, 1fr); реализует сетку из 12 ячеек в ряду по 1fr каждая. .parent { display: grid; grid-template-columns: repeat(12, 1fr); } .child-span-12…

https://xhtml.ru/2022/layout-patterns/12-span-grid/

Центрирование элемента

Для центрирования элемента внутри его родителя можно использовать CSS-свойство place-items: center. Сперва надо указать сетку в качестве метода отображения, а затем добавить CSS-свойство place-items: center для того же элемента. place-items — это сокращение для одновременной установки свойств align-items и justify-items. Установка значения center одновременно для align-items и justify-items разместит элемент в центре контейнера. .parent {…

https://xhtml.ru/2022/layout-patterns/super-centered/

Адаптивная боковая панель

Адаптивная боковая панель В этом примере используется функция minmax() для макетов сетки. Здесь эта функция используется для установки минимального размера боковой панели в 100 пикселей, но на больших экранах это значение увеличивается до 25% ширины. Таким образом боковая панель всегда будет занимать 25% горизонтального пространства своего родителя, пока эти 25% не станут меньше 100 пикселей.…

https://xhtml.ru/2022/layout-patterns/sidebar/

RAM (Repeat, Auto, Minmax)

RAM (Repeat, Auto, Minmax) В этом примере объединены некоторые концепции создания адаптивного макета с автоматически размещаемыми и гибкими дочерними элементами. Ключевые термины, которые нужно запомнить, это повторение (repeat), заполнение(auto) и minmax(), которые составляют аббревиатуру RAM. Все вместе это выглядит так: .parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } Здесь используется repeat() с использованием ключевого…

https://xhtml.ru/2022/layout-patterns/repeat-auto-minmax/

Разорванный блинчик

Это обычный html-макет для маркетинговых сайтов, например, может содержать три элемента в ряд, обычно с изображением, заголовком, а затем некоторым текстом, описывающим некоторые особенности продукта. На небольших экранах предпочтительнее, чтобы они красиво сжимались и расширялись по мере увеличения размера экрана. При использовании flexbox для такого эффекта, не понадобятся медиа-запросы для настройки размещения элементов при изменении…

https://xhtml.ru/2022/layout-patterns/deconstructed-pancake/

Стопка блинчиков

Макет: стопка блинчиков В отличие от «разорванного блинчика», этот пример не переносит дочерние элементы при изменении размера экрана. Этот макет, обычно называемый sticky footer (липкий нижний колонтитул), используется для веб-сайтов (в частности для одностраничных приложений) и мобильных приложений (нижний колонтитул обычно представляет собой панель инструментов). При добавлении компоненту display: grid получится сетка с одним столбцом,…

https://xhtml.ru/2022/layout-patterns/pancake-stack/

Выстраивание содержимого

Макет карточек с выстроенным содержимым Основной момент, демонстрируемый здесь — это использование CSS-свойства justify-content: space-between, которое размещает первый и последний дочерние элементы по краям контейнера, а оставшееся пространство равномерно распределяется между остальными элементами. Контейнер карточки использует режим отображения flexbox, а направление его содержимого с помощью flex-direction: column устанавливается по вертикали. Заголовок, описание и блок изображения…

https://xhtml.ru/2022/layout-patterns/line-up/

Классические 3 колонки

Классический 3-х колоночный макет У этого макета html-страницы есть верхний и нижний колонтитулы (шапка и подвал), левая и правая боковые панели, основной контент. Чтобы написать такую сетку с помощью всего одной строки кода, можно использовать CSS-свойство grid-template. Это позволяет одновременно устанавливать параметры строк и столбцов шаблона. Пара свойство и значение: grid-template: auto 1fr auto /…

https://xhtml.ru/2022/layout-patterns/classic-3-cols-layout/

Древовидные представления, только html и css

Древовидное представление (сворачиваемый список) можно сделать, используя только html и css, без использования JavaScript.
Программное обеспечение для специальных возможностей будет показывать дерево в виде списков, вложенных в раскрывающиеся виджеты, а взаимодействие с клавиатурой поддерживается автоматически.

See this code tree-views html+css only on x.xhtml.ru.

HTML

HTML разметка начинается с простых вложенных списков:



Планеты гиганты…

https://xhtml.ru/2022/html/tree-views/

Захват экрана пользователя и запись видео

Для совместного использования вкладок, окон и экранов на веб-платформе используется Screen Capture API (API захвата экрана).

Метод getDisplayMedia() позволяет пользователю выбрать экран для захвата в качестве медиапотока. Затем этот поток можно записать с помощью MediaRecorder API или поделиться им с другими пользователями по сети. Запись можно сохранить в локальный файл с помощью метода showOpenFilePicker().
В…

https://xhtml.ru/2022/layout-patterns/media-screen-record/

CSS: оформление скроллбаров 2022

Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (они понадобятся Chrome и Safari), а также стандартизированные свойства scrollbar-width и scrollbar-color (пока для Firefox).

Таким образом, базовая настройка будет выглядеть так:

.styled-scrollbars {
/* плашка-бегунок и фон */
scrollbar-color: #999 #333;
}
.styled-scrollbars::-webkit-scrollbar {
width: 10px; /* в…

https://xhtml.ru/2022/css/styling-scrollbars/

CSS-селектор :has() для родительского элемента

Как назначить CSS-свойства селектору-родителю, в зависимости от существования элемента внутри него и управлять свойствами соседних HTML-элементов? Новый CSS-селектор :has() поможет добраться до родителя определенного элемента с помощью только CSS. Например, если внутри контейнера есть изображение, этому контейнеру нужно добавить display: flex.
Суть проблемы: задать стиль контейнеру-родителю в зависимости от существования элемента внутри него. Раньше это…

https://xhtml.ru/2022/css/css-has-parent-selector/

Скачивание и сохранение файлов на диск

Как сделать сохранение файла из HTML-страницы в браузере на диск? Два способа вызова из браузера диалогового окна для скачивания и сохранения файла на диск пользователя с помощью Javascript.

Современный способ

Использование API доступа к файловой системе и метода showSaveFilePicker().
Чтобы сохранить файл, следует вызвать метод showSaveFilePicker(), который возвращает обещание (promise) с FileSystemFileHandle. Этому методу можно…

https://xhtml.ru/2023/layout-patterns/download-a-file-from-js/