Если попросили сделать резиновую верстку, картинки тоже должны резиниться? Например, она на всю ширину вьюпорта должна располагаться, есть крайние точки - мобилка от 0 до 720 пикселей, в этом случае картинка должна растягиваться до 720 пикселей? Дальше крайние точки от 720 до 1140, здесь уже через srcet подставляем картинку качественнее, и уже эта более качественная картинка тянется в пределах этих точек, и так далее, правильно я понимаю?
В резиновой вёрстке картинки резинятся вместе со всеми блоками. Самый ленивый вариант — вставить картинку максимального разрешения для десктопа и она просто сузится на мобильных. Но тогда вы будете передавать пользователям мобильных лишние сотни килобайтов, что в сумме складывается в лишние мегабайты. Лучше готовить отдельные изображения для подходящих брейкпоинтов и дальше переключать их с помощью srcset и синтаксиса 400.png 400w — мы расскажем об этом подробнее в лекции.
Если у меня есть одна и та же картинка, и в разных случаях она выглядит по-разному: где-то на странице она закругленная полностью в круг, где-то закруглена только снизу, где-то еще по-другому выглядит, такую картинку нужно в обертку закидывать и самой обертке применять стили?
Попробуйте подумать о вашей вёрстке не только как о конечном результате, похожем на макет, а как о живой системе, которая должна удобно поддерживаться. Если редактору сайта при замене картинок в каталоге придётся вырезать отдельные картинки с разным скруглением — такой редактор долго не протянет. Гораздо удобнее будет наложить оформление (уголки) поверх контента (картинок). Это прекрасно ложится в систему контентной и оформительской графики. Посмотрите на макеты, подумайте какие картинки будут меняться, а какие — нет. И сделайте правильно :)
Можно ли для всех контентных картинок задать
display: blockглобально?
Если вы понимаете, что во всех ситуациях вам приходится писать display: block для контентных картинок, то подобные стили имеет смысл написать глобально. Наши критерии запрещают писать глобальные стили, за исключением «нормализации» или задания общих наследуемых параметров. В случае с img, у вас уже наверняка есть max-width: 100%, так что вы можете добавить туда и display: block. Но не увлекайтесь глобальными стилями — они меняют браузерные стили по умолчанию и могут быть непривычными или даже неудобными в некоторых случаях.
Запоздалый вопрос и не совсем в тему :) На первом интенсиве по HTML & CSS дополнительные критерии (Д5) требовали подключение normalize.css. Почему на втором уровне normalize из критериев убрали? Насколько актуально его применение в современных проектах с требованиями IE11 и новее? В каких случаях его всё-таки стоит применять?
Normalize.css — это набор стилей, которые сводят различия между браузерными стилями к минимуму. Использовать его в ваших проектах или нет — это выбор каждого. На первом уровне вёрстки мы сделали такой критерий для того, чтобы познакомить студентов с самим сборником. На втором уровне мы не требуем его — вы уже сами можете принять это решение.
Снипет .visually-hidden
В материалах к курсу вы даете статью: Скрытие элементов Hiding DOM elements мне стало непонятно почему автор предлагает скрывать элемент, но в фокусе и в состоянии актив показывать?
.visually-hidden:not(:focus):not(:active)У меня теперь чувство недопонимания, помогите разобраться с этим.
Этот класс универсальный, это видно по его содержимому. То есть его придумали, чтобы его можно было легко бросить на любой элемент и скрыть его визуально, но оставить доступным для скринридера. Таким элементом вполне может быть интерактивный элемент, вроде ссылки. Чаще всего на странице скрывают такие ссылки, которые помогают незрячим или перейти к главному содержимому (skip links). В итоге, если на такую ссылку попасть с клавиатуры табом, то она покажется. Теперь, когда вы понимаете как это работает, вы можете выбрать как использовать этот класс: с фокусом-эктивом или сам по себе. По идее, вам эти псевдоклассы никак не мешают использовать этот класс, к пользователям скринридеров могут когда-нибудь помочь.
Как наподобие тега можно вставить для десктопной версии видео, а для планшета и мобильного - картинку?