{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "CSS", "_rss_description": "CSS — язык стилей, используемый для описания внешнего вида и форматирования документов, написанных на HTML. Здесь я рассказываю о том, что нового узнал об этой технологии.", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/modenov.ru\/blog\/tags\/css\/", "feed_url": "https:\/\/modenov.ru\/blog\/tags\/css\/json\/", "icon": "https:\/\/modenov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1756117061", "authors": [ { "name": "Владимир Моденов", "url": "https:\/\/modenov.ru\/blog\/", "avatar": "https:\/\/modenov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1756117061" } ], "items": [ { "id": "83", "url": "https:\/\/modenov.ru\/blog\/all\/display-flex\/", "title": "Display: flex", "content_html": "

Продолжаю разбираться в дебрях CSS<\/a>, а заодно и пытаться пересказывать полученные знания в своём блоге (для себя и для интересующихся читателей).<\/i><\/p>\n

Сегодня говорим про свойство display: flex<\/tt> .<\/p>\n

\n\n<\/div>\ndisplay: flex<\/tt> — это свойство CSS, которое позволяет управлять расположением элементов внутри контейнера, превращая его в так называемый «флекс-контейнер». Давайте представим, что у нас есть коробка (контейнер) с игрушками (элементами). Display: flex<\/tt> дает нам инструменты, чтобы упорядочить эти игрушки в ряд, колонку или как-нибудь по-другому, как нам нужно.<\/p>\n
Где применяется?<\/h2>\n
\n
Навигационные меню<\/b>: для выравнивания пунктов меню.<\/li>\n
Карточки продуктов<\/b>: для создания гибких сеток товаров.<\/li>\n
Формы<\/b>: для выравнивания полей ввода и кнопок.<\/li>\n
Галереи изображений<\/b>: для создания адаптивных галерей.<\/li>\n<\/ul>\n
Как это работает?<\/h2>\n
Когда вы применяете display: flex<\/tt> к контейнеру, все его непосредственные дочерние элементы становятся flex-элементами. Это означает, что вы можете управлять их размером, порядком и выравниванием с помощью различных свойств Flexbox.<\/p>\n
Основные свойства:<\/b><\/p>\n
flex-direction<\/tt> — определяет направление, в котором располагаются flex-элементы (по горизонтали или вертикали). \nrow<\/tt> (по умолчанию) — элементы располагаются в строку. \ncolumn<\/tt> — элементы располагаются в столбик. \njustify-content<\/tt> — определяет, как элементы распределяются по основной оси (горизонтально или вертикально). \nflex-start<\/tt> — элементы выравниваются по началу. \nflex-end<\/tt> — элементы выравниваются по концу. \ncenter<\/tt> — элементы выравниваются по центру. \nspace-between<\/tt> — элементы распределяются с равными промежутками между ними. \nspace-around<\/tt> — элементы распределяются с равными промежутками вокруг них. \nalign-items<\/tt> — определяет, как элементы выравниваются по поперечной оси (перпендикулярно основной оси). \nflex-start<\/tt> — элементы выравниваются по началу. \nflex-end<\/tt> — элементы выравниваются по концу. \ncenter<\/tt> — элементы выравниваются по центру. \nbaseline<\/tt> — элементы выравниваются по базовой линии текста. \nstretch<\/tt> — элементы растягиваются, чтобы заполнить контейнер.<\/p>\n
Примеры кода:<\/h2>\nПростой пример применения флексбокса:<\/b><\/p>\n
<!DOCTYPE html>\n<html lang="ru">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Flexbox Пример<\/title>\n <style>\n .container {\n display: flex; \/* Включаем Flexbox *\/\n flex-direction: row; \/* Элементы располагаются в строку *\/\n justify-content: space-between; \/* Равные промежутки между элементами *\/\n align-items: center; \/* Выравнивание по центру по вертикали *\/\n height: 100px; \/* Высота контейнера *\/\n background-color: #f0f0f0; \/* Цвет фона контейнера *\/\n padding: 10px; \/* Отступы внутри контейнера *\/\n }\n\n .item {\n background-color: #4CAF50; \/* Цвет фона элементов *\/\n color: white; \/* Цвет текста *\/\n padding: 20px; \/* Отступы внутри элементов *\/\n border-radius: 5px; \/* Закругленные углы *\/\n }\n <\/style>\n<\/head>\n<body>\n\n<div class="container">\n <div class="item">Элемент 1<\/div>\n <div class="item">Элемент 2<\/div>\n <div class="item">Элемент 3<\/div>\n<\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\nВ этом примере мы создали контейнер с классом container<\/tt>, который использует display: flex<\/tt>.<\/li>\n Элементы внутри контейнера (с классом item<\/tt>) располагаются в строку благодаря flex-direction: row<\/tt>.<\/li>\n Свойство justify-content: space-between<\/tt> распределяет элементы с равными промежутками между ними.<\/li>\nСвойство align-items: center<\/tt> выравнивает элементы по центру по вертикали.<\/li>\n<\/ul>\nПример с навигационным меню:<\/b><\/p>\n<!DOCTYPE html>\n<html lang="ru">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Flexbox Menu<\/title>\n <style>\n .menu {\n display: flex; \/* Включаем flexbox *\/\n list-style-type: none;\n padding: 0;\n margin: 0;\n }\n .menu li {\n margin-right: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <nav>\n <ul class="menu">\n <li>Главная<\/li>\n <li>О нас<\/li>\n <li>Услуги<\/li>\n <li>Контакты<\/li>\n <\/ul>\n <\/nav>\n<\/body>\n<\/html><\/code><\/pre>\nЗдесь .menu<\/tt> использует display: flex<\/tt> для выравнивания пунктов меню в строку.<\/li>\n Свойство list-style-type: none<\/tt> убирает маркеры списка для навигационных пунктов.<\/li>\n<\/ul>\n", "summary": "Display: flex — это свойство CSS, которое позволяет управлять расположением элементов внутри контейнера, превращая его в так называемый \"флекс-контейнер\". В этой статье я расскажу про свойство display: flex подробнее.", "date_published": "2024-08-26T23:40:21+03:00", "date_modified": "2024-08-26T23:41:21+03:00", "tags": [ "css", "образование", "разработка", "фронтенд" ], "image": "https:\/\/modenov.ru\/blog\/pictures\/Flex-justify-content.png", "_date_published_rfc2822": "Mon, 26 Aug 2024 23:40:21 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "83", "_e2_data": { "is_favourite": false, "links_required": [ "highlight\/highlight.js", "highlight\/highlight.css" ], "og_images": [ "https:\/\/modenov.ru\/blog\/pictures\/Flex-justify-content.png", "https:\/\/modenov.ru\/blog\/pictures\/CSS-Logo.png", "https:\/\/modenov.ru\/blog\/pictures\/education.jpg", "https:\/\/modenov.ru\/blog\/pictures\/frontend.png" ] } }, { "id": "82", "url": "https:\/\/modenov.ru\/blog\/all\/display-inline-block-inline-block\/", "title": "Свойство display и значения inline, block, inline-block", "content_html": "Объясняя читателям одну из самых непростых тем в CSS, я сам лучше закрепляю эти знания. <\/i><\/p>\n \n\n<\/div>\nСвойство display<\/b> в CSS<\/a> определяет, как элемент отображается на веб-странице. Оно влияет на поведение элемента, его размеры, расположение и взаимодействие с другими элементами.<\/p>\n В зависимости от значения, элемент может быть:<\/h2>\n✵ Строчным (inline)<\/b> — отображается как часть текста, занимает столько места, сколько нужно для его содержимого. Идеально для коротких фрагментов (слова, аббревиатуры, ссылки) или элементов, которые должны «плыть» в тексте, не создавая новых строк. \n✵ Блочным (block)<\/b> — отображается как отдельный блок, занимает всю ширину родительского элемента, имеет отступ сверху и снизу. Данное свойство балансирует макет, формирует блоки контента (заголовки, параграфы, кнопки) и позволяет применять фиксированную ширину и высоту. \n✵ Строчно-блочным (inline-block)<\/b> — сочетает в себе свойства inline<\/b> и block<\/b>, отображается как часть текста, но может иметь ширину и высоту, а также отступы. Например, идеально подходит для вёрстки навигационных меню, карточек, элементов с фиксированной формой внутри динамичного контента.<\/p>\nПрименение<\/h2>\nВ современной веб-разработке display<\/b> используется повсеместно:<\/p>\n ✵ структурирование контента: с помощью display: block <\/b> можно создавать разделы, блоки текста, заголовки и другие элементы, которые должны занимать всю ширину родительского элемента. \n✵ оформление элементов: display: inline-block<\/b> позволяет размещать элементы в строке, но при этом задавать им ширину и высоту, что позволяет создавать более сложные макеты. \n✵ скрытие элементов: с помощью display: none<\/b> можно скрывать элементы с страницы, что удобно для управления отображением контента. \n✵ создание гибких макетов: display<\/b> в сочетании с другими свойствами CSS позволяет создавать сложные макеты с адаптивным отображением элементов на разных устройствах.<\/p>\nПримеры:<\/h2>\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Пример display<\/title>\n <style>\n .inline {\n display: inline;\n background-color: lightblue;\n padding: 10px;\n }\n\n .block {\n display: block;\n background-color: lightgreen;\n padding: 10px;\n margin-bottom: 10px;\n }\n\n .inline-block {\n display: inline-block;\n background-color: lightcoral;\n padding: 10px;\n width: 100px;\n height: 50px;\n }\n <\/style>\n<\/head>\n<body>\n <div class="inline">Inline элемент<\/div>\n <div class="inline">Inline элемент<\/div>\n <div class="block">Block элемент<\/div>\n <div class="block">Block элемент<\/div>\n <div class="inline-block">Inline-block элемент<\/div>\n <div class="inline-block">Inline-block элемент<\/div>\n<\/body>\n<\/html><\/code><\/pre>", "summary": "Рассказываю про важное CSS свойство display и его значения — inline, block, inline-block. Блог Владимира Моденова. Всё про фронтенд-разработку и не только.", "date_published": "2024-08-24T23:09:12+03:00", "date_modified": "2024-08-26T23:40:59+03:00", "tags": [ "css", "образование", "разработка", "фронтенд" ], "image": "https:\/\/modenov.ru\/blog\/pictures\/css-display-block-vs-inline-block-2588544921.png", "_date_published_rfc2822": "Sat, 24 Aug 2024 23:09:12 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "82", "_e2_data": { "is_favourite": false, "links_required": [ "highlight\/highlight.js", "highlight\/highlight.css" ], "og_images": [ "https:\/\/modenov.ru\/blog\/pictures\/css-display-block-vs-inline-block-2588544921.png", "https:\/\/modenov.ru\/blog\/pictures\/CSS-Logo.png", "https:\/\/modenov.ru\/blog\/pictures\/education.jpg", "https:\/\/modenov.ru\/blog\/pictures\/frontend.png" ] } }, { "id": "79", "url": "https:\/\/modenov.ru\/blog\/all\/chto-takoe-veb-dostupnost\/", "title": "Что такое веб-доступность?", "content_html": "Недавно я решил погрузиться в веб-разработку: хочу узнать о том, как работают интернет и сети, различные протоколы, веб-доступность, HTML, CSS, JavaScript, а также другие базовые инструменты, на которых сегодня работают совершенно все сайты в интернете. Эти знания помогут мне в своих личных проектах и работе.<\/p>\n Чтобы закреплять усвоенное лучше, я решил вести в своём блоге конспекты. Возможно, эти небольшие шпаргалки помогут не только мне, но и другим начинающим разработчикам.<\/p>\n Сегодня говорим о веб-доступности и о том, зачем она нужна.<\/p>\n\n\n<\/div>\nВеб-доступность <\/b>(или accessibility<\/b>) — это подход к разработке веб-сайтов и приложений, который делает их удобными и доступными для всех пользователей, включая людей с ограниченными возможностями.<\/p>\nОсновные понятия веб-доступности:<\/h2>\n\nПерцептивность (Perceivable)<\/b>: Информация и элементы интерфейса должны быть представлены таким образом, чтобы их могли воспринимать все пользователи. Например, добавление текстовых описаний к изображениям для людей с нарушениями зрения.<\/li>\n<\/ol>\n\nУправляемость (Operable)<\/b>: Пользователи должны иметь возможность взаимодействовать с интерфейсом всеми доступными способами, включая клавиатуру и вспомогательные технологии. Например, все функции сайта должны быть доступны с клавиатуры.<\/li>\n<\/ol>\n\nПонятность (Understandable)<\/b>: Интерфейс и его элементы должны быть понятны и предсказуемы. Например, использование простого и ясного языка, а также логичная структура навигации.<\/li>\n<\/ol>\n\nНадежность (Robust)<\/b>: Контент должен быть доступен и корректно отображаться на различных устройствах и с использованием различных вспомогательных технологий. Например, использование стандартов HTML и CSS.<\/li>\n<\/ol>\nОсновные задачи веб-доступности:<\/h2>\n\nДобавление альтернативного текста (alt-текста) к изображениям<\/b>: Это помогает людям с нарушениями зрения понять, что изображено на картинке.<\/li>\n<\/ol>\n\nСоздание доступной навигации<\/b>: Убедитесь, что все элементы навигации доступны с клавиатуры и имеют логичную структуру.<\/li>\n<\/ol>\n\nИспользование семантической разметки<\/b>: Правильное использование HTML-тегов помогает вспомогательным технологиям правильно интерпретировать контент.<\/li>\n<\/ol>\n\nКонтрастность цветов<\/b>: Убедитесь, что текст контрастирует с фоном, чтобы его было легко читать людям с нарушениями зрения.<\/li>\n<\/ol>\n\nТестирование с помощью вспомогательных технологий<\/b>: Проверяйте ваш сайт с использованием экранных читалок и других вспомогательных технологий, чтобы убедиться в его доступности.<\/li>\n<\/ol>\nПочему это важно?<\/h2>\nВеб-доступность не только улучшает пользовательский опыт для людей с ограниченными возможностями, но и делает сайт более удобным для всех пользователей. Это также может улучшить SEO, так как поисковые системы лучше понимают структурированный и семантически правильный контент.<\/p>\n Дополнительные материалы для изучения:<\/h2>\n✵ Что такое веб-доступность и как научиться делать доступные сайты<\/a> \n✵ Доступность — Doka Guide<\/a> \n✵ Доступность — Result School<\/a> \n✵ Доступность от Google<\/a> \n✵ ТОП-5 проблем с доступностью, которые чаще всего игнорируют<\/a> \n✵ Основы веба, которые должен знать начинающий разработчик<\/a> \n✵ Веб-разработчик: кто это, что делает, сколько зарабатывает и как им стать<\/a> \n✵ Веб-технологии для разработчиков | MDN<\/a><\/p>\n", "summary": "Веб-доступность — это подход к разработке веб-сайтов и приложений, который делает их удобными и доступными для всех пользователей. Сегодня говорим о веб-доступности подробнее.", "date_published": "2024-08-17T15:37:59+03:00", "date_modified": "2024-08-26T23:41:46+03:00", "tags": [ "css", "html", "образование", "разработка", "фронтенд" ], "image": "https:\/\/modenov.ru\/blog\/pictures\/web-accessibility.jpg", "_date_published_rfc2822": "Sat, 17 Aug 2024 15:37:59 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "79", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/modenov.ru\/blog\/pictures\/web-accessibility.jpg", "https:\/\/modenov.ru\/blog\/pictures\/CSS-Logo.png", "https:\/\/modenov.ru\/blog\/pictures\/html5-logo.jpg", "https:\/\/modenov.ru\/blog\/pictures\/education.jpg", "https:\/\/modenov.ru\/blog\/pictures\/frontend.png" ] } } ], "_e2_version": 4199, "_e2_ua_string": "Aegea 11.5 (v4199)" }