Всем привет! 👋 Завершила ещё один проект по верстке — снова много новых открытий для себя. Вот что узнала в этот раз: ➡️ Адаптивность — как вы помните, она давалась мне тяжело. Когда я писала Tic-Tac-Toe, то ещё не умела работать с гридами. Относительные единицы давались мне нелегко, и непонятно было вообще, куда и что применять. Поэтому я приняла решение пройти Мастер-Класс (МК) по адаптивной верстке. Подход был прост и понятен — пишем разметку, затем стили, затем адаптируем. Раньше у меня это не было так структурировано, и обычно я после разметки маленькой части сразу лезла в стили. Конечно, в некоторых случаях с гридами действительно работать проще, чем с флексами. Понятно, что ещё расти и расти, чтобы виртуозно набирать код пальцами не глядя, но я сейчас стараюсь докапывать каждую тему до хорошего уровня понимания, чтобы знать, что и откуда берется. Может, и пригодится такой детальный разбор — пока без понятия. ➡️ Таблицы — всегда их избегала, а в этом проекте пришлось сверстать. В общем-то, здесь они особенно интересные за счёт нестандартных границ. Позиционирования в проекте, конечно, было безумно много... кстати, о нём. ➡️ Позиционирование — моя главная проблема с самого начала. Наверное, я раза три пересмотрела видеоматериал одного лектора, ещё три — другого, прочитала статью, законспектировала, и чуда не случилось. Всё равно я ненавидела эту тему. Мной любима была только связка position: relative + position: absolute, остальное я отказывалась воспринимать. Но в общем-то здесь я над ним прям пострадала. Будем ещё пробовать. Пока это больше не кажется таким страшным и непонятным. ➡️ Познакомилась с тегом select. Да-да, о закрытии пробелов в HTML я тоже упоминала) Выпадающие списки селекта — довольно неприятная штука, но взаимодействовать с ними я тоже научилась. В этом проекте поработала с option, с атрибутами тега select, а также стилями выпадающего списка (хотя стилизовать их и не особо-то можно). ➡️ Узнала про полезное свойство scrollbar-gutter: stable; (правда, на Windows оно не так впечатляет, потому что скроллбар там всегда виден, но вот на MacOS скроллы — это одно удовольствие (они появляются там автоматически, когда необходимы)). Но в целом-то его применение лишним уж точно не будет. ➡️ Последнее, что хотелось бы отметить, — это логические свойства CSS. Я читала про них статью на доке. Опять-таки, раньше не применяла — сейчас одно из любимых. Ещё узнала, что не всем известно, что для padding-block и подобных можно задавать не одно значение, а два одновременно. В следующем посте выложу конкретные куски кода с фиксами для SVG, тач-устройств и другими техническими штуками, которым научилась ⬇️