Рубрика «css»

в 13:01, , рубрики: css, ruvds_статьи, sm909_questions, верстка, вопросы и ответы, собеседования, фронтенд
Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 2 - 1

Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем, я к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать.

Так, вы готовы? Давайте посмотрим, что я вам подготовил.

Читать полностью »

в 11:58, , рубрики: blackquotes, Callout, css, multi-column, obsidian

Предисловие

В этой статье я подробно расскажу о возможностях использования Callout в Obsidian, покажу существующие решения, а также объясню, как создавать свои собственные, индивидуальные типы Callout-блоков. Дополнительно поделюсь полезными надстройками и шаблонами.

Слово благодарности

Я хочу поблагодарить всех пользователей оценивших и поучаствовавших в обсуждении моей дебютной статьи Obsidian: Типы данных.

Читать полностью »

в 11:15, , рубрики: css, javascript, библиотека javascript, интерактивная карта, скрипт, слайдер изображений

Всем привет! Меня зовут Артем, я начинающий разработчик и это мой первый пост, прошу не судите строго.

Интерактивные метки на изображении JS - 1

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

Скрипт по умолчанию поддерживает до 50 меток на изображении.

Посмотреть код и скачать исходники можно на GitHub

Читать полностью »

в 9:01, , рубрики: css, ruvds_статьи, sm909_css_tricks, верстка, лайфхаки
Магия CSS на практике: советы по вёрстке от гика. Часть 6 - 1

Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту как просто к альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня мы рассмотрим:

  • мой подход к написанию стилей для динамической сетки без использования БЭМ-модификаторов;
  • как я перестал писать свойство text-decoration со значением none для элемента <button>;
  • способ для вычисления значения свойства width в зависимости от контента элемента;
  • почему вам стоит удалить все стили с использованием псевдо-класса :focus.

Давайте посмотрим, что я вам подготовил.

Читать полностью »

в 14:01, , рубрики: css, ruvds_статьи, web-разработка, верстка, лайфхаки
CSS в 2025: какие фишки теперь доступны? - 1

Привет.

В начале января 2025 года мне захотелось посмотреть, какие новые фишки CSS стали поддерживаться современными браузерами за прошлый год. Провести некий срез, что уже можно использовать. И тут меня посетила мысль: «А почему бы не поделиться новинками на Хабре?». Вот я и пришёл.

Сразу скажу, что эта статья — краткий обзор появившимся возможностей. Моя цель — уведомить вас. Я не буду закапываться в принцип работы и другие нюансы. По этой причине, пожалуйста, воспринимайте эту статью как список, что можно изучить в 2025 году.

Для составления списка я использовал сайт «Can I Use». Брал те новшества, которые стали «зелёными» в 2024 году. Смотрел последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Browser.

Не буду больше тянуть. Давайте посмотрим, что я вам подготовил.

Читать полностью »

в 9:01, , рубрики: chrome, css, Firefox, ruvds_перевод, UI, windows, баги, браузеры, Веб-разработка, Программирование

Почему именно в Chrome под Windows на сайтах не работают эмодзи флагов - 1


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

Более того, вы даже можете легко реализовать динамическое определение иконок на основе кода региона: 

// Смещение для корректировки кода ASCII каждого символа в строке кода ISO страны для определения соответствующего флага.
const EMOJI_CHARACTER_OFFSET = 127397;

const getEmojiForCountryCode = (countryCode: string) =>
  String.fromCodePoint(
    ...countryCode
      .toUpperCase()
      .split('')
      .map((char) => char.charCodeAt(0) + EMOJI_CHARACTER_OFFSET),
  );

// "en-US"
const currentLanguageCode = navigator.language;
// "US"
const currentCountryCode = currentLanguageCode.split("-")[1];
// "🇺🇸"
getEmojiForCountryCode(currentCountryCode);
// "🇫🇷"
getEmojiForCountryCode("FR");
// "🇸🇪"
getEmojiForCountryCode("SE");

Всё идёт шикарно!

Как вдруг…Читать полностью »

в 9:01, , рубрики: css, ruvds_статьи, sm909_unknown_css, web-разработка, верстка, лайфхаки
Неизвестно полезный CSS. Часть 7 - 1

Привет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

  • что вы можете не знать про псевдо-класс :not();
  • примеры работы псевдо-класса :has(), работающие по логике операторов ИЛИ и И;
  • как неожиданно может повыситься специфичность правила при использовании псевдо-класса :has();
  • чем полезно свойство user-select, кроме отмены выделения текста.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать полностью »

в 19:42, , рубрики: css, html, верстка, проект

Всем привет, меня зовут Максим. Я начинающий фронтенд разработчик, а также студент Центрального университета. Я обучаюсь фронтенд разработке на Яндекс Практикуме и хочу поделиться опытом разработки первого проекта.

Начало

Читать полностью »

в 13:01, , рубрики: chrome, css, html. веб-разработка, ruvds_перевод, safari, view transitions, переходы между представлениями

Всего несколько строк CSS для плавных переходов между страницами - 1


Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.Читать полностью »

в 9:01, , рубрики: css, ruvds_статьи, sm909_css_interview, верстка, вопросы и ответы, интервью, псевдо-классы
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?» - 1

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

Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.

У меня получился достаточно большой список. Он составлен на основе моего опыта, опыта моих знакомых и публично доступных собеседований. Каждый вопрос будет отдельной статьёй.

Сегодня я дам ответ на следующий вопрос: «Какие знаешь псевдо-классы?».

Читать полностью »

123...1020...153
Рейтинг@Mail.ru
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js