CSS

A collection of 15 posts

Эмуляция различных медиа выражений в Chrome и отладка темного режима
Html5

Эмуляция различных медиа выражений в Chrome и отладка темного режима

Emulate media queries in Chrome, for example: prefers-color-schemeНебольшая заметка-памятка, как отлаживать разные медиа выражения и режимы. Например, вы хотите отладить режим для печати или смену светлой и темной темы. В

CSS

Защита Email от Spamer’ов

UpdateВ предыдущем посте я показал как прятать имейлы от спамеров на чистом CSS: Защита Email от Spamer’ов на CSSNojs, only CSS! Да да, No JS Сейчас поведаю про интересный способ защиты имейлов от спамеров используя только CSS. И так, сначала ревертим наш имейл,

Вопросы по CSS
CSS

Вопросы по CSS

Готовимся к собеседованиюГотовимся к собеседованиюНа прошедшей конференции FrontendConf было много интересных докладов про CSS. Эти выступления, особенно выступление Никиты Дубко с докладом “CSS — язык программирования”, навели меня на мысль о

Antispam

Защита Email от Spamer’ов на CSS

Nojs, only CSS!Да да, No JS Сейчас поведаю про интересный способ защиты имейлов от спамеров используя только CSS. И так, сначала ревертим наш имейл, можем это сделать на JS: 'major@geekjob.ru'.split('').reverse().join('') // ur.bojkeeg@rojam Далее этот имейл

Bugs

Ghost: Blurry web page in Chrome

Bug with enable experimental web platform features У нас есть блог blog.new.hr и он работает (успешно) на Node.js (но речь сейчас не о том ☺). Крутится все это на движке Ghost. Удобная современная платформа, но есть в ней и косячки, которые приходится

CSS

4 CSS фишки

На каждый день Скрыть все пустые строки в таблице Для этого не нужно использовать JS и писать функции модификации DOM. Все можно сделать на уровне CSS: table { empty-cells: hide; } Отличная поддержка в браузерах начиная с IE8+. UPD В комментариях 4rontender (Rinat Valiullov) добавил: работает

Animation

CSS: zoom + scale

Сглаживание объектов анимации при масштабировании Было дело давно, было дело вечром, случайно наткнулся на трансляцию одного подкаста. Решил взглянуть в чатик. Один из слушателей просил помочь ему решить задачку со сглаживанием. Дан код на codepen.io, где в центре находится круг радиусом 10px. При

Browsers

Fun Frontend: мониторим страницу без JS

Задачки с собеседований и не только Сегодня будет один из ответов на задачку с собеседования. Вопрос обычно звучит так: назовите все способы передать данные на сервер из браузера. Мы не рассматриваем тут очевидные ответы, а рассмотрим интересные техники связанные только с CSS. Кстати, эти

Browsers

Добавляем кнопку DarkTheme в браузер за 2 минуты

CSS инверсия по мотивам вебстандартов В последнее время из за jetlag’a много провожу времени за компьютером в номере в кромешной тьме. На дворе 5 утра, мне уже не спится, свет в номере включить не могу, так как я не один. Читать черное по

CSS

Стилизация и кастомизация File Inputs

Правильный путь Небольшой туториал на тему как кастомизировать тег input с учетом семантики и доступности, используя тег label и немного JavaScript. Изменение внешнего вида инпутов, как правило, не вызывает трудностей, но file input отличается от остальных. Это связано с безопасностью и с тем, что

CSS

Получить данные из псевдоэлементов after и before

С помощью JavaScript Если у вас есть сгенерированный CSS-контент и вам надо получить доступ к значениям через JS, то есть способ сделать это: var content = window.getComputedStyle(document.querySelector('.element'),':after').getPropertyValue('content'); Или же можно обратиться сразу к свойству content: var

👍 ?
👓 ?