![](https://webcf.waybackmachine.org/web/20221006052207im_/https://habrastorage.org/getpro/habr/upload_files/a72/a0b/11b/a72a0b11b40224731fd6c0090da4753c.png)
Браузеры постоянно добавляют новые функции HTML, JavaScript и CSS. Вот несколько полезных дополнений к работе с формами, которые вы могли пропустить…
Каскадные таблицы стилей
Браузеры постоянно добавляют новые функции HTML, JavaScript и CSS. Вот несколько полезных дополнений к работе с формами, которые вы могли пропустить…
В современном дизайне, почти на каждом сайте и в приложениях можно увидеть тени, которые дизайнеры и разработчики применяют для создания эффекта глубины и объема...
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
HitBox — это чаще всего невидимая область или группа областей, которая помогает обнаруживать коснулся ли объект другого объекта, у которого тоже есть свой хитбокс.
В HTML страницах изначально нет понятие хитбокса у блоков, поэтому в этом посте мы сами получим и обработаем их с помощью JS.
Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.
Игра Жизнь - это клеточный автомат созданный в 1970 году Джоном Конвеем.
Это не совсем игра, а просто симуляция клеток по определенным правилам.От игрока лишь требуется размещать эти клетки.
В этом посте мы сделаем "Игру Жизнь" на HTML странице при помощи CSS & JS.
Одним днем возникла необходимость добавить в проект генерацию коротких css классов и id элементов в html верстке. Основные причины были следующие:
* Усложнить жизнь парсерам и блокировщикам рекламы (они зачастую на имена классов опираются).
* Уменьшить размер html страниц
* И чтобы все было как у Google, шутка 😄
Очевидно, что минификация классов и id полностью не защитит от парсеров, как говорится, лучшая защита от парсинга – удалить страницу из интернета. Но данный подход может отбить охоту у вчерашних студентов с фриланс биржи зарабатывать на парсинге, или защитить от универсальных ботов-парсеров.
У меня есть хороший знакомый, который в 25 лет полностью потерял зрение. Представляете, все то, что для нас привычно, для него изменилось? Компьютеры и телефоны превратились в кирпичи, и толку от них стало мало. Или нет?
Привет! Меня зовут Андрей Кузнецов. Я frontend lead в «Рунет Бизнес Системы». Мы разрабатываем сервис для интернет-эквайринга банков, и работаем по модели White label, поэтому мне нельзя называть клиентов. Но я хочу рассказать, как у нас в компании появилось accessibility. То есть, доступность — возможность использования интерфейса всеми, независимо от физических или технических ограничений. Это история о том, как мы это нашли, на какие грабли наступали и к чему пришли в данный момент. Я буду считать, что не зря всё это написал, если после моего рассказа, вы захотите сделать шаги в сторону того, чтобы accessibility появилось и в ваших продуктах.
Сказ про то, как повысить надежность фронтенда с помощью CSS Modules, TypeScript и Webpack.
Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность.
Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были отзывчивыми, не лагали, а анимации были плавными и выдавали 60fps даже при высокой вычислительной нагрузке на main thread.
В этом туториале я расскажу вам о том, как решить проблему отсутствия масштабирование страницы при ширине экрана меньше чем значение body min-width, в браузерах Firefox и Safari.
Если поменять порядок названий классов CSS в атрибуте «class» HTML-элемента, то поменяется ли отображение HTML-страницы в браузере? Точно не поменяется? Или точно поменяется? А, может быть, есть нюансы?
Давайте попробуем разобраться. Для этого я загляну в действующий стандарт языка HTML, буду на основании определений из этого стандарта делать выводы и проверять их на практических примерах.
Я честно пытаюсь понять идею tailwind, читаю официальную документацию и в преимуществах вижу полную ересь:
За последнее время в CSS появилось достаточно новых возможностей, которые позволяют нам создавать новые решения для старых задач. Мне захотелось рассказать вам о тех, которые работают в современных браузерах, и их можно использовать прямо сейчас.
Я подобрал, как мне кажется, наиболее распространенные задачи и покажу вам, как они решаются с помощью современного CSS. Надеюсь, вам будет интересно, и вы узнаете что-то новое. Так что не буду задерживаться, давайте начнем.
Frontend-разработчик нашей компании Данила Абрамов рассказывает, как оптимизировать анимации и делать их плавными. В статье разберем CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.
Данила объяснит, что происходит в браузере, когда мы запускаем анимацию и каким образом браузер перерисовывает все эти кадры, а также поделится основными правилами для успешной работы анимаций.
Я развиваю скрипт на языке PowerShell для обхода и визуализации HTML-дерева из файла на языке HTML для анализа кода HTML на ошибки. В частности, для поиска ошибок при именовании классов CSS. Для этого сначала нужно получить набор классов из атрибута class HTML-элементов, а затем перебрать эти названия классов в цикле. Для разбора HTML я использую библиотеку «HTML Agility Pack». Также я разбираю, как можно обработать ссылки на символы (их еще называют по-английски «HTML-entities») средствами указанной библиотеки.
Это заключительная статья из цикла статей о работе браузеров. Ссылка на первые два перевода:
Часть 1: навигация и получение данных
Часть 2: парсинг и выполнение JS
Статьи предназначена для начинающих разработчиков и тех, кто интересуется разработкой. Здесь нет глубоких технических деталей, хотя, возможно, вы найдете что-то новое для себя.
Помимо деревьев, о которых мы уже говорили — DOM, CSSOM и AST — браузеры также строят дерево специальных возможностей. Деревья, построенные на этапе парсинга (DOM, CSSOM), объединяются в дерево рендеринга. Его цель – убедиться, что содержимое страницы отобразит элементы в правильном порядке.
При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами.
Определимся сразу, что мета-приложения и мета-компоненты - это еще не устоявшиеся в индустрии термины. Это скорее предложение, которое может быть принято или отвергнуто сообществом веб-разработчиков. Самое время объяснить, что конкретно мы имеем в виду.