Как стать автором
Поиск
Написать публикацию
Обновить
43.92

CSS *

Каскадные таблицы стилей

Сначала показывать
Период
Уровень сложности

Пример приложения — телефонной книги на AngularJS + Bootstrap v3

Время на прочтение4 мин
Количество просмотров67K
Сообществу Angular требуются свежие туториалы и учебники с простыми примерами на последних версиях библиотек. Правила, которые работали в Angular v0.X, уже не все действуют, в чём легко убедиться, а хочется разобрать что-то более сложное, чем фильтр из учебника на сайте и TODO-лист из примеров реализации (как, например, найденный для v1.0.3: jsfiddle.net/dakra/U3pVM ). Когда такие примеры покажутся слишком простыми, хочется посмотреть на развитие постановки задачи и приближенное к реальности приложение с некоторым оформлением стилей.

Предлагается вниманию пример приложения — работы с телефонной книгой в 2 списках: основного и «spam». Каждый из списков подвержен фильтрации (ну это — самое простое и встроенное в фреймворк), редактированию элементов, добавлению новых и удалению имеющихся. Одним кликом переносятся элементы из одного списка в другой, а подсветки элементов сделаны в стиле Bootstrap v.3.
Читать дальше →

PopulateJS: don't repeat yourself в HTML-разметке

Время на прочтение4 мин
Количество просмотров8.5K
Распространение LESS/SCSS, а также ожидаемые движения в мире браузеров и стандартов, появление jQuery, наконец, вернуло фан в вёрстку HTML-страничек и во фронт-энд разработку.
Но представьте, что вам требуется сверстать раздел в интернет-магазине, раздел блога, или целую главную страницу Хабра? Да, мы делим страницу на отдельные блоки и делаем для них разметку, порождаем множество вложенных блоков, делаем для них CSS/LESS/SCSS. Безусловно, существуют такие замечательные средства как Zen-Coding, шаблонизатор jQuery Templates, а для построения сеток (grids) — всевозможные CSS-фреймворки, наподобие Bootstrap или же Zurb Foundation.

Но часто хочется посмотреть как же ведет себя вёрстка списков, когда в них не один только что свёрстанный элемент, а множество элементов. Наверняка, вы копипастили хотя бы раз в жизни разметку блока, чтобы заполнить страницу контентом, особенно когда под рукой нет запущенной любимой CMS или веб-фреймворка с шаблонизатором. А потом удаляли копипасту. Или что хуже, вы из тех, кто получает «в нарезку» HTML'ки от тех, кто верстает, и вам необходимо удалять эту копипасту самим.

Добро пожаловать под кат, если вам это хорошо знакомо

Медиазапросы и медиафича «view-mode» — это REC теперь

Время на прочтение1 мин
Количество просмотров1.2K
И медиазапросы (Media Queries), и медиафича «view-mode» 19 июня официально стали стандартами, рекомендованными W3C (W3C Recommendation). Ура!

Медиазапросы: http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/

Медиафича «view-mode»: http://www.w3.org/TR/2012/REC-view-mode-20120619/

Быстрый сброс CSS-кэша

Время на прочтение1 мин
Количество просмотров11K
Функция кэширования — удобная и обоснованная штука, особенно для проектов с огромной нагрузкой и десятками тысячь единовременных пользователей. И речь даже не столько о кэшировании страниц, сколько о принудительном сохранении внешних CSS файлов и картинок.
Серверам-то хорошо, а вот разработчикам — не сладко. Ctrl+F5 в браузере часто не решает проблемы, а не малоизвестный способ с добавлением к имени внешнего CSS файла псевдо параметра вида ?v=1.1 не всегда идеален. В нашем случае, например, вообще не используются сервера для отладки и все изменения сразу тестируются в бою =[. Понятно, чем это чревато для пользователей, а для меня так вообще аду подобно — чтобы увидеть внесенные в CSS изменения приходится каждый раз менять в шаблоне значение ?v= и нет ни малейшей возможности генерировать это число случайным образом, как я бы делал, если бы были тестовые сервера…
Вы тоже все еще кипятите? Тогда мы идем к вам!

Обходим CSP nonce через дисковый кеш браузера

Уровень сложностиСредний
Время на прочтение16 мин
Количество просмотров1.3K

Эта статья описывает изощренную технику обхода Content Security Policy (CSP) на основе nonce-значений через эксплуатацию механизмов кеширования браузера. Автор демонстрирует, как комбинация CSS-инъекций, CSRF-атак и особенностей работы bfcache и дискового кеша может привести к выполнению произвольного JavaScript-кода даже при наличии строгой CSP.

Читать далее

Пишем идеальную mobile-first галерею

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.8K

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

Читать далее

Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.7K

Дисклеймер: хотел создать скромный пост, а не статью, но не справился с управлением новым редактором. А старый редактор не поддерживает посты.


Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).


image

Читать дальше →

Выкинь свой RoadMap: что на самом деле нужно знать начинающему фронтендеру

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5.8K

Сколько бы раз я ни смотрел RoadMap для начинающих фронтендеров, всегда натыкаюсь на одну проблему: RoadMap, как правило, — просто свалка технологий, которую можно описать одной фразой: "Учи всё, что есть". Но так ли это? Нужно ли учить всё это в самом начале? Давайте отбросим большую схему с технологиями в сторону и поговорим начистоту.

Читать далее

Возможности поля HTML-документа, часть 2. Внедряем CSS и JS

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров4.2K

В прошлой статье я рассказал, какие возможности скрывает в себе поле HTML-документа, выведенное на форму 1С. Сегодня подробнее остановлюсь на возможностях языков CSS (язык стилей и некоторых элементов поведения) и JavaScript (язык программирования, используемый в веб-разработке), которые могут пригодиться в работе с 1С-интерфейсом.

Читать далее

Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров12K

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс.

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

Читать далее

Классификация и идентификация элементов в HTML и CSS и немного о БЭМ для самых маленьких

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров15K

Классификация и идентификация элементов в HTML и CSS и немного о БЭМ.

Основные концепции работы с классами и идентификаторами, а также как применять методологию БЭМ на практике.

Читать далее

Tailwind не только для MVP

Время на прочтение7 мин
Количество просмотров8.6K

Всем привет!

Обычно tailwind используют для каких-то MVP/админок/не очень больших проектов, но мне кажется, что tailwind, имеет место быть в средних и крупных проектах. Большинство его минусов решаемы, а плюсы чертовски хороши :)

В этой статье я распишу его плюсы и минусы и как можно минусы превратить в плюсы.

Tailwind больше чем просто MVP

Дебаты по Tailwind CSS: ещё один классный инструмент, отвергнутый веб-пуристами

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5.8K

Tailwind CSS — как фреймворк для разработчиков довольно прост в понимании. По сути, он позволяет вам встраивать код CSS в ваш HTML код. Чтобы, как говорится в слогане Tailwind: «быстро создавать современные веб‑сайты, не покидая HTML». Таким образом, это избавляет разработчиков от необходимости контекстно переключаться с HTML на таблицу стилей CSS.

Собственная документация Tailwind указывает на распространенное возражение против такого подхода: «разве это не просто встроенные стили?» Те из вас, кто жил в 1990-х годах, наверняка помнят, что когда‑то, еще до того, как произошла революция CSS, им приходилось добавлять разметку стилей в свои HTML‑файлы. Но, по словам Tailwind, его подход «утилитарного класса» предлагает больше функциональности, чем встроенные стили, включая возможность создавать адаптивный дизайн (дизайн, адаптированный для мобильных устройств).

Таким образом, простота использования — особенно по сравнению с кодированием и последующим обслуживанием CSS‑файла — и возможность создавать свой стиль внутри HTML являются основными причинами, по которым многие разработчики любят Tailwind.

В своем посте Мэтт Рикард добавил в качестве ключевых преимуществ фреймворка следующие пункты:

Далее...

Ближайшие события

React + Styled Components — идеальная анимация. Параметризованная анимация

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров5.6K

В данной статье продемонстрирован способ реализации “параметризованной” css анимации React компонента с помощью styled components. Параметризованная потому что css анимация описывается через параметры, которые динамически рассчитываются на основе пропсов и состояний компонента при его рендеринге.

Читать далее

Сравнение тяжеловесности популярных библиотек UI компонент для Vue 3

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров13K

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

Было проведено исследование - взяты три HTML элемента: Button, Input и Select, и проверено, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3.

Читать далее

Фичи WebKit в Safari 16.4

Уровень сложностиПростой
Время на прочтение21 мин
Количество просмотров9.4K

Сегодня мы рады рассказать вам о многочисленных дополнениях к WebKit, которые включены в Safari 16.4. Этот выпуск содержит 135 новых веб-функций и более 280 обновлений. Давайте посмотрим.

Читать далее

CSS-селектор :has() и междустрочные интервалы в длинных текстах

Время на прочтение6 мин
Количество просмотров4.4K


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

Читать дальше →

Еще один способ использовать SVG в React. На этот раз удобный

Время на прочтение4 мин
Количество просмотров41K

SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги <img>, <object> и даже <iframe>. Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG, необходимо вставлять SVG-изображения непосредственно в html-разметку. Хотя на самом деле есть еще один способ. И он удобный.

Читать далее

Создание музыкального инструмента с помощью Web Audio API

Время на прочтение9 мин
Количество просмотров4.4K

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

Аккордеон имеет 34 кнопки со стороны высоких частот и 12 кнопок со стороны басов. В отличие от фортепианного аккордеона, который имеет такое же логическое хроматическое расположение, как и фортепиано, у диатонического аккордеона просто набор кнопок, и я действительно не знал, с чего начать. Кроме того, каждая нота отличается независимо от того, вытягиваете ли вы меха или вталкиваете их, поэтому на самом деле на стороне высоких частот 68 нот (хотя некоторые из них повторяются). Кроме того, как я думаю, вы знаете, аккордеоны громкие. Очень громкие. Чтобы сильно не злить соседей, и узнать, как работает компоновка этой коробки, я решил сделать маленькое веб-приложение.

Читать далее

Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера

Время на прочтение10 мин
Количество просмотров9.4K

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

Читать далее

Вклад авторов