SelenIT

Можно, напр. background-size: 50% 100% и background-position куда надо.

Кстати, почему не вариант? Во всех браузерах, где работают сами градиенты, работают и множественные фоны... Только не забыть убрать оттуда ненужный хлам типа -ms-префикса и бессмысленных (в данной задаче) фильтров для старых IE. А еще лучше ограничиться стандартным синтаксисом, а потом прогнать CSSник через Autoprefixer.

Доказывать-то не обязательно, но тег в примере желательно всё-таки закрыть правильно, даже несмотря на опыт А она начиналась?

В теории можно (было бы) примерно так.

Но «регистрацию» лучше делать не псевдоссылкой, а полноценной кнопкой (<button>).

А что должно происходить при длинном тексте? Кружок должен оставаться на уровне первой строки, а диагональная линия должна становиться длиннее? И, соответственно, точка излома линии должна сдвигаться вправо? А начало текста должно быть над одним и тем же местом или над точкой излома линии?

Откуда взялся вариант «в одну строку»? По смыслу, http-equiv — эквивалент какого-либо HTTP-заголовка. Заголовки в HTTP, насколько я в курсе, всегда отвечают за что-то одно (максимум — уточняют, как в случае Content-type, что содержимое — не просто текстовый HTML-файл, а именно в такой вот кодировке). Но заголовков-универсалов, которые отвечают и за тип содержимого, и за кеширование, и за черта в ступе, лично я в HTTP не встречал

Почему поля в двух разных тегах <form>? Email отправлять на сервер не надо, что ли?

У .description при таком размере стоит width: 100% в сочетании с left: 15%. Вот излишек и торчит.

По-моему, не ужас. Aside указывает на смысловую роль этого блока (вспомогательная, косвенно относящаяся информация, ни в коем случае не основное меню сайта/страницы). Див-обертка отвечает за стилизацию этого блока, независимо от наполнения этой обертки (если на другой странице в то же визуальное место понадобится поставить уже основное меню, достаточно будет просто поместить туда nav вместо aside, при этом не придется менять никакие стили). Оформление на каркасе, семантика на содержимом, разделение ответственности, всё ок. Ссылки кучей - так информация второстененная (aside же!), тратить время слепого пользователя на объявление "список из четырех пунктов, пункт первый: главная, пункт второй..." не столько улучшит доступность этого блока, сколько ухудшит доступность основного. Всё логично и объяснимо... ...Ужас - если автор этой верстки подразумевал другое (напр. что этот набор ссылок - таки меню)

Можно вставить foreignObject с произвольным HTML внутри. Правда, пишут, что в вебкитах оно может глючить, но transform (и, видимо, прочие способы создания hasLayout RenderLayer) вроде как помогают.

display:flex для контейнера переопределяет поведение потомков, независимо от того, какой display им задан (и есть ли у них float). Поэтому можно просто указывать и то, и то, и в новых браузерах будет работать механизм flex, а в старых — старый механизм.

В 2014-м лучше задавать контейнеру display:flex . А float/inline-block оставлять как аварийный вариант для ископаемых. У обоих из них свои недостатки (у float — выпадение из контейнера, требующее clearfix-ов или изоляции контекста форматирования через overflow со товарищи, у инлайн-блоков — влияние пробелов между тегами, от которых приходится избавляться обнулением шрифта или «магическими константами» типа -0.31em). Инлайн-блоки дают чуть больше свободы в плане горизонтального и вертикального выравнивания, но флексбоксы дают всё то же и много чего еще с куда меньшими издержками (если не гнаться за всеми мыслимыми префиксами/вариантами синтаксиса).

Title у всего (хотя для интерактивных элементов, типа ссылок и кнопок, логичнее). Но когда title не поясняет, а тупо дублирует текст надписи — многих (в частности, меня) это конкретно бесит. А что такая практика будто бы полезна для SEO или еще чего-то, мягко говоря, не доказано.

Не за что). Для еще большего прояснения разницы между разными способами борьбы с вываливанием float-ов из контейнера могу предложить этот материал

Можно без картинок. Если нужна совместимость с ископаемыми - как вариант, можно картинку темного градиента на html, светлые полоски на body.

как вариант, :not(.active):hover

не работает. display:table тоже ее не увеличивает (ну, почти). Для пустого элемента - однозначно не увеличивает. одиночное сбрасывание обтекания (после) + двойная отмена схлопывания margin-ов (до и после), требовалось для оглядки на IE7 (единообразия с действием zoom:1 там).

Похоже, повезло. Из description этой страницы явно осмысленного сниппета не построить, а единственное осмысленное содержимое на ней - таблица. Вот Гугл и пытается выводить ее, как умеет (а умеет, оказывается, неплохо)...

http://css-live.ru/articles/ikf-vertikalnoe-vyravnivanie-v-stroke-chast-1-8-ya-publikaciya-cikla-tajny-css2-1″.html

По-моему, на картинке тень снаружи, просто падает вверх, как-то так.

И мне непонятно, зачем карте менять размер Заодно случайно и хак для IE9 нашелся, авось кому-нибудь пригодится.

Выглядит симпатично. Но неужели нельзя было обойтись без дублирования меню в разметке?

Так label же как раз привязывается к id инпута, через атрибут for.А чтобы «поднять элемент на уровень глаз», есть element.scrollIntoView().

В новых браузерах должен сработать слой-покрышка с pointer-events:none. Для старых IE существует полифилл, либо обходные пути с SVG.