Ни Chrome, ни Safari, ни Firefox за последние несколько недель не представили новых функций, но не бойтесь, потому что What’s! Этот выпуск журнала «Важно» ведут одни из лучших преподавателей в индустрии веб-разработки и, честно говоря, некоторые убийца Материал.
Сохранение положения видео на разных страницах с помощью переходов просмотра
Крис Койер демонстрирует, как сохранять положение видео на разных страницах с помощью переходов представлений CSS. Он отмечает, что это достаточно легко сделать с помощью переходов при просмотре одной страницы, но при переходе при просмотре нескольких страниц вам потребуется воспользоваться преимуществами JavaScript. pageswap Событие для сохранения информации о статусе видео sessionStorage как строку JSON (также работает со звуком и iframe), а затем использовать эту информацию для восстановления состояния pagereveal. Да, есть один тииииииини Звук немного заикается, потому что технически мы его имитируем, но он все равно довольно аккуратный.
Кроме того, компания CodePen, основанная Крисом, я уверен, вы уже знаете, объявила о закрытой бета-версии CodePen 2.0, в которой вы можете подать заявку на участие. Одним из преимуществ CodePen 2.0 является то, что вы можете создавать реальные проекты с несколькими файлами, а это означает, что вы можете создавать переходы между представлениями в CodePen. Очень хороший!
Как «называть» медиа-запросы
Кевин Пауэлл показывает нам, как использовать преимущества каскадных слоев CSS для «именования» медиа-запросов. Этот метод не так эффективен @custom-media (Или даже запросы в стиле контейнера, как предположил один комментатор), но хотя они поддерживаются не всеми веб-браузерами, трюк Кевина весьма изобретателен.
Адам Аргайл напомнил нам об этом на прошлой неделе. @custom-media Это тестируется в Firefox Nightly (о запросах в стиле контейнера пока ничего не известно), но если вы освоитесь с каскадными слоями CSS, вы тем временем можете использовать трюк Кевина.
Сброс CSS Vale
Мне нравится хороший сброс CSS. Сколько бы я их ни читал, я всегда нахожу что-то потрясающее и добавляю это в свой сброс. Я украл сброс CSS от Vale svg:not([fill]) { fill: currentColor; }Но из этого можно извлечь гораздо больше!
Как работают браузеры?
Если вы когда-нибудь задавались вопросом, как на самом деле работают веб-браузеры – как они получают IP-адреса, выполняют HTTP-запросы, анализируют HTML, строят DOM-деревья, рендерят и рисуют макеты, недавняя книга Дмитрия Красуна «Как работают браузеры» представляет собой невероятно интересный интерактивный текст. Это действительно заставляет задуматься об ограничениях языков веб-разработки и о том, почему некоторые функции HTML, CSS и JavaScript такие, какие они есть.
Как работает макет CSS?
Кроме того, PolyPane объясняет основы макета CSS, включая блочную модель, линии и базовые линии, схемы позиционирования, ссылки на укладку, макет сетки и флексбокс. Если вы новичок в CSS, я думаю, эти объяснения вам действительно помогут. Если вы новичок (как и я), я все равно считаю важным узнать, как эти фундаментальные концепции применяются к новым функциям CSS, особенно с учетом того, что в наши дни CSS быстро развивается.
CSS Masonry (вероятно) не за горами
Говоря о макете, Джен Симмонс уточняет, когда мы сможем использовать display: grid-lanesТакже известно как каменная кладка CSS. Хотя он еще не поддерживается ни в одном веб-браузере, Firefox, Safari и Chrome/Edge поддерживаются. Все Это тестируется, поэтому ситуация может очень быстро измениться. В любом случае, Джейн предоставляет несколько полифилов!
Если вы хотите быть на шаг впереди, вы можете позволить Сунканми Фафоворе двигаться вместе с вами. display: grid-lanes.
Тематическая анимация с использованием относительного цветового синтаксиса.
Если вы увлечены системами и организацией дизайна и считаете иллюстрацию и анимацию впечатляющими, но неорганизованными формами искусства, то статья Энди Кларка о тематике анимации с использованием относительного цветового синтаксиса CSS действительно поможет вам преодолеть разрыв между искусством и логикой. Если переменные CSS вас интересуют, эта статья определенно для вас.
Модели против страниц (и все, что между ними)
модели? Страницы? световые короба? Диалог? всплывающие подсказки? Понимание различных типов наложений и знание того, когда использовать каждый из них, по-прежнему довольно запутанно, особенно с учетом того, что новые функции CSS, такие как всплывающие окна и средства вызова интереса, хотя и невероятно полезны, делают ландшафт более туманным. Короче говоря, Райан Нойфельд объясняет разницу между модальными и страницами и даже предоставляет основу для принятия решения о том, какой тип наложения использовать.
Поддержка масштабирования текста тестируется в Chrome Canary.
Знаете ли вы, когда работаете с текстом, который был масштабирован или уменьшен на уровне ОС? Хорошо…Если вы веб-разработчик, то, вероятно, нет. В конце концов, эта функция не работает в Интернете! Однако Джош Тумут сообщает нам, что Chrome Canary тестирует метатег, который заставляет веб-браузер учитывать этот параметр ОС. Если вам интересно, это Но Джош углубляется в детали, и это стоит прочитать.
увидимся в следующий раз!
