SelenIT

А что такого уж страшного произойдет, если width=device-width будет задан для экрана, большего 768px?

Есть вот такое старенькое решение: http://chikuyonok.ru/2011/04/inline-vertical-align/ Но флексами, особенно с flex-flow:row-wrap, должно быть нормально, просто бордер надо ставить непосредственным потомкам flex-контейнера, а не внутренним элементам.

Тогда лично я бы взял эти квадраты за основную структурную единицу, а дальше по-простому "в лоб", как-то так...

Оно выравнивает сами инлайн-блоки относительно контейнера строки, в которой они находятся: http://jsfiddle.net/L05sah7u/2/ А вот для table-cell'ов выравнивает содержимое, так сложилось исторически.

То, что тут три квадрата с по-разному скомпонованными внутри элементами помельче - случайность или закономерность дизайна?

Имхо, давно пора вместо первобытного шаманства с html, body { height: 100% } (тем более чего-то еще более дикого) ставить min-height: 100vh на сам оборачивающий блок. Даже IE9 это понимает, не говоря о всех остальных. А более старые IE обычно крутятся на маленьких экранах и футер там по-любому будет выдавлен за край и никто не заметит, что он не прижат

Как вариант - можно парой градиентов, типа такого.

Эм, почему нельзя? Есть же background-size. Увеличиваем картинку в 200 раз (background-size: 1px 1400px), смещаем на 600px вверх (background-position: 0 -600px), размножаем (background-repeat: repeat-x) и вуаля. А можно и не размножать, а сразу растянуть по обеим осям. Но и впрямь как-то странно заниматься такими выкрутасами сейчас, в эру линейных градиентов и прочей векторности...

Это можно исправить, добавив внешнему диву z-index:0, а картинке - position:relative; z-index: -1. При этом absolute и top у ссылки можно убрать вообще.

Это если в настройках винды стоит "крупный шрифт". Можно отключить через layout.css.devPixelsPerPx в about:config.

Это не "тень неправильно накладывается", это отступы картинки и смещение абсолютной ссылки, которые зачем-то сделаны независимыми слоями, по-разному округляются, когда при масштабировании оказываются нецелыми. Быстрый костыль - изначально поставить дробные значения "с запасом", напр. top: 7.4px; height: 65.4px для ссылки. Но не проще ли просто вложить картинку внутрь ссылки и не мучиться с двойным позиционированием (и его подгонкой) вообще?

Можно, просто смысл записи меняется. .photo:last-child — элемент, имеющий класс photo и являющийся последним ребенком в своем родителе. А .photo :last-child (то же самое, что *.photo *:last-child) — любой элемент, являющийся последним ребенком своего родителя внутри элемента с классом photo (в т.ч. последний ребенок самого элемента .photo).

Ну, Оперу на Престо еще можно рассматривать как отдельную ветку, а-ля фоксовая ESR. Но я почти уверен, что у ее идейных пользователей давно стоит последний релиз этой ветки. А там, насколько я помню, практически все вкусняшки работали уже без префикса, даже многострочные флексбоксы… Фокс в 16-й версии убил поддержку уймы префикснутых свойств (opacity, background-size, border-image и др., актуальная ESR-версия — 31 (еще какое-то время может быть актуальна 24-я, но префиксов нет уже и в ней. Уходят старые фоксы весьма резво (примерно так), поэтому шанс наткнуться на то, для чего префикс актуален, ничтожно мал, и выигрыш от ускорения загрузки CSS без старого хлама для всех будет больше, чем радость пары чудаков-старьевщиков. В конце концов, юзеры ископаемых браузеров знают, на что идут, и не ждут от сайтов всех современных чудес. Изящная деградация и вообще!

Для какого свойства сейчас актуален -moz-префикс (хаки с селекторами типа :-moz-focus-inner не в счет)? Где, кроме 2d-трансформаций в IE9, востребован префикс -ms-? Что последняя Опера на Прресто (12.1+) не понимает без префикса -o-? Фактически, на сегодня нужен только -webkit-префикс (для мобильных сафарей и анимаций в Хроме), по-моему, остальные — ненужный трафик.

В том-то и дело, что «строчность» и «блочность» (а также «табличность», «флексовость» и др. типы отображения) — термины CSS-оформления, там они появились и существуют до сих пор. Раньше была путаница между ними и моделями содержимого в HTML4, сейчас (в HTML5) для моделей содержимого своя терминология. И раз двусмысленность этих терминов устранена, то, имхо, в контексте CSS-оформления вполне допустимо сокращенно сказать «блочный элемент» вместо «элемент дерева рендеринга, отображаемый в виде блочного CSS-бокса»

В HTML5 нету, но в CSS есть

IE9 точно не в режиме эмуляции старья? У меня в IE11, эмулирующем IE9, всё нормально (за исключением угловатой кнопки поиска).

Строго говоря, не наследуется, а применяется к элементу как единому целому, со всеми его «потрохами». Как если бы в фотошоп вставили скриншот отрендеренного элемента и добавили прозрачность этому слою.

Это не тон, это инструмент. Плохой тон — злоупотреблять инструментом, пихать его везде и т.п. Если к месту, то всё ок. CSS лучше, чем HTML?? Вообще говоря, одно другому не противоречит, inline-block можно использовать и со списком. Считается, что плюсов у меню на списках всё-таки чуть больше.

В HTML для подобного есть разве что details с summary. Но работать будет, на сегодняшний-завтрашний день, только в вебкитятах. Если есть доступ к исходной разметке страницы, можно засунуть в нее и тег <style> с нужным CSS. Некрасиво и (скорее всего, если вставляться будет в <body>) невалидно, но задача будет решена.

Цвет, судя по всему, можно переопределить через -webkit-text-fill-color. Но вообще стилизация HTML5-контролов — та еще развлекуха

При display:table по спецификации height работает как min-height.

Редактор W3C-шной версии спеки настаивает, что нельзя полагаться на вложенность секций и нужно дублировать структуру заголовков по старинке, уровнями. Потому что куча софта еще не освоила новый алгоритм, и есть риск, что из-за слабого внедрения алгоритм вообще грохнут. Три года назад несколько заголовков H1 считались ошибкой SEO (хоть и не особо критичной).

Вариация на тему, не требующая дублирования ссылки и противоестественного вложения: http://jsbin.com/wecosanefugi/4/edit Недостаток — невозможность выделения текста ссылки, но оно, как правило, и не требуется... Upd.: но вообще идея такого интерфейса — сплошная кликабельная область, отдельные части которой действуют по-другому — противоречит «принципу наименьшего удивления» и вызывает обоснованные сомнения в ее удобстве. Может, не поздно переубедить дизайнера?

Судя по всему, тот пример не работал не из-за префиксов (которые Фоксу для анимаций уже давно не нужны), а потому что вот.