Всем привет, меня зовут Кирилл, я frontend разработчик компании Usetech. CSS постоянно развивается, и некоторые полезные свойства остаются незамеченными. Возможно о них говорят не так много, как о других, но в этой статье на примерах я разберу новые и полезные свойства CSS. Ещё вы увидите раздел ресурсы, где можно почитать подробнее и глубже. CSS свойства, которые мы рассмотрим в данной статье: Читать далее
Подробнее![[Перевод] Создаём веб-сайт, как будто сейчас 1999 год](https://habrastorage.org/webt/yt/gr/yi/ytgryi99ktcjigzv95syetqzvlw.png)
Раньше веб был более странным местом В прошлом году я поставила перед собой цель вернуть дух старого веба, креативность и шарм конца 90-х и начала 2000-х. В те времена не было правил, ты ставил на веб-страницу что угодно, потому что это было твоё пространство, в котором можно делать всё, что пожелаешь. И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о…
Подробнее
Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors. Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и
Подробнее![[Перевод] Геометрия объектной модели документа: исчерпывающее руководство](https://habrastorage.org/webt/qb/js/pi/qbjspiq_llicm9mnwl9rwsvh7_m.png)
Я не считаю, что DHTML — cool, просто картинка хорошая) Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи. Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс…
Подробнее
В этой статье мы будем рассматривать ускорение работы страницы только с помощью файлов HTML и CSS Читать далее
Подробнее
Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨ Читать далее
Подробнее
Зачастую, когда говорят об адаптиве, подразумевают сужение большого экрана до мобильного размера без потери функциональности. Однако, на самом деле, адаптив также существует между разными десктопными версиями. Обычно разработчики не очень стараются применять адаптивные подходы для больших экранов, ведь если интерфейс поместился на HD разрешении, то он точно поместится на 2K разрешении и больше. Однако контент никак не масштабируется, поэтому имеем на больших разрешениях маленькие
Подробнее
Когда говорим «динамический», подразумеваем JavaScript. Но некоторые динамические функции можно реализовать, используя только CSS. Например, цвета. Читать далее
Подробнее
Владея знаниями по вёрстке, можно достичь поставленных целей и перейти на следующую ступень профессионализма. В этой статье я расскажу, какие материалы мы с коллегами используем в своей работе: уверен, эта информация будет полезна разработчикам на CSS. На базовом уровне Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов Что изучать? Читать далее
Подробнее
Делиться своими идеями с сообществом - хорошо и правильно. Это позволяет развиваться, перенимать лучшие практики, исследовать новые инструменты, учиться оформлять свои решения. Но какой код стоит выносить в общий доступ? И как делать это на постоянной основе? Чтобы разобраться в этих вопросах я решил сделать свой Javascript OpenSource Boilerplate - маленькую, но максимально расширяемую библиотеку компонентов. Она называется handy-ones. Читать далее
Подробнее
Псевдокласс :auto-fill в CSS позволяет нам стилизовать элементы , которые содержат контент, автоматически заполняемый браузером. В качестве примера возьмем форму регистрации нового пользователя. Вы когда-нибудь нажимали на поле ввода и видели раскрывающийся список предложений для вставки? Читать далее
Подробнее
Анимация — несколько рисунков, показанных последовательно, чтобы создать иллюзию движения. Анимации привлекают внимание пользователей и помогают сделать интерфейсы понятными. Мы подготовили перевод статьи, чтобы разобраться, как контролировать движения и переходы в CSS. Читать далее
Подробнее