Статьи

Вещи, которые вы, возможно, не знали о HTML и CSS

Август 11, 2018

Недавно я посмотрел хорошую видео презентацию Матиаса с Fronteers 2012, которая показалась мне интересной и вдохновляющей. Я уже имел в виду некоторые подобные вещи, поэтому я закончил писать эту статью. Это о некоторых случайных вещах и фактах, которые вы, возможно, (не) знали о HTML и CSS.

Вещи, которые вы, возможно, не знали о HTML и CSS

CSS em unit

Первоначально CSS em-единица была получена из ширины заглавной буквы M, откуда и произошло ее название. Я напоминаю себе, что впервые прочитал это в книге по CSS, не уверенный в названии книги, но вы можете проверить страницу Википедии, чтобы узнать больше по этой теме.

HTML5 теги

Структурные элементы HTML5 — это практическая реализация поиска имен среди CSS- классов и селекторов идентификаторов , найденных в то время в дикой природе. Сначала я прочитал о том, как в настоящее время появились теги HTML5, изучая введение в HTML5 Брюса Лоусона и Реми Шарпа.

Минимально допустимая веб-страница

С появлением HTML5 вам нужно будет только определить doctypeи titleдля создания новой действительной веб-страницы. Так что, теоретически, нет html, headили bodyдля этого нужны теги. Это происходит потому, что браузеры все равно их принимают, просто проверьте отладчики браузера с помощью приведенного ниже кода:

<!doctype HTML>
<title>Bazinga</title>

Специфичность CSS

Требуется 256 сцепленных селекторов класса CSS, чтобы превзойти специфику идентификатора. Когда Крис Койер сделал этот пример , у тебя было много дискуссий на эту тему. Райан Седдон тоже кое-что об этом написал.

Также, по теме, интересным фактом является то, что в CSS нет максимальной длины имени или идентификатора класса.

Цвета

Peruи Tomatoна самом деле оба являются действительными именами цветов CSS. Кроме того, шестнадцатеричный #badA55цвет не такой крутой, это на самом деле своего рода лайм ?

Кроме того, при использовании bgcolorатрибута HTML (не рекомендуется), например: <body bgcolor="chucknorris"></body>​кроваво-красный цвет. Матиас упомянул об этом в своем видео как кровь врагов Чака Норриса. Чистое совпадение … или нет ?

Прочитайте обсуждение Stack Overflow, чтобы узнать, почему HTML считает «chucknorris» цветом.

CSS может быть # смешным

Проверьте следующие CSS-строки, чтобы вызвать улыбку на вашем лице:

#universe:before { content: ""; }
.ninja { visibility: hidden; }
.kids-these-days { -webkit-perspective: none; }
.work:after{ content:"Beer!"; }

Кроме того, вы можете проверить CSSHumor в Twitter для получения дополнительной информации.

CSS px! = Device px

Блок «px» в CSS на самом деле не имеет ничего общего с пикселями экрана, несмотря на плохо выбранное имя. Вам нужно сделать глубокий вдох и не торопиться, чтобы прочитать больше здесь и здесь .

Нет (больше) CSS4

Кажется, что нет такой вещи как CSS4 в конце концов. Кроме того, CSS3 это все, что после CSS2.1, это все о модулях. Вкладка Аткинс подробно написала о том, почему не существует такого понятия, как CSS4.

Как определить, использует ли сайт HTML5 #funny

  • Попробуйте это в Internet Explorer.
  • Это сработало?
  • Нет?
  • Это HTML5.

HTTP-запрос

«Самый быстрый HTTP-запрос — это тот, который не сделан».

Это не связано с HTML и CSS, но мне очень нравится эта строка. Каждый раз, когда я работаю над проектом и пытаюсь оптимизировать количество HTTP-запросов, это всплывает у меня в голове. Наверное, я впервые увидел это, читая посты Стива Соудерса .

:: before & :: after псевдоэлементы

Еще несколько дней назад Firefox был единственным, кто поддерживал переходы и анимацию для псевдоэлементов CSS, таких как ::beforeи ::after. Это отличная функция, и хорошие новости за 2013 год в том, что WebKit теперь также поддерживает это . Теперь вы можете открыть Google Chrome Canary и увидеть их в действии.

Когда вы бросаете IE6 и IE7 …

IE6 больше не играет важной роли, поэтому с учетом этого теперь вполне можно использовать:

  • Несколько селекторов класса CSS (например .foo.bar)
  • Селекторы атрибутов (например E[foo])
  • Исправлено позиционирование
  • Непосредственный выбор ребенка (например .foo > .bar)

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

Дорогостоящие свойства CSS

Обычно свойства CSS совсем не дороги, но когда дело доходит до рисования в браузере, вы должны знать, что некоторые из следующих факторов могут повлиять на способ отображения вашей страницы:

  • позиция: фиксированная
  • background-position: исправлено
  • граница радиуса
  • фон-размер
  • коробчатого тень
  • градиенты

Чтобы узнать больше, посмотрите слайды Пола Айриша « Лучшая производительность CSS с инструментами» .

Это оно!

Знаете ли вы более интересные вещи, которые стоит поделиться? Пожалуйста, не стесняйтесь делать это в разделе комментариев ниже. Спасибо за чтение этой статьи, и я с нетерпением жду ваших мыслей по этому поводу.

38
Share: