Comments 33
Может кому тоже интересно будет.
Возможно, хорошим свежим дополнением будет и это: http://css-live.ru/css/bolshaya-statya-pro-gridy-css-grid-layout.html
Правда TeX не был интерактивным, так что кой-какие решения оттуда в CSS не перенести, но всё равно — поздравляю с оберетнием
fil'а! Интересно когда добавят fill?
У кого-нибудь кроме меня есть полосы прокрутки во фреймах CodePen?
Я посмотрел, откуда они появляются и написал userstyle чтобы убрать их.
@-moz-document domain("codepen.io") {
#output:hover .background-image {
transform: none;
}
body {
font-size: 0;
}
}
Прошу прощения, если кто использовал код выше.
Рекомендую заменить селекторы на уникальные:
@-moz-document domain("codepen.io") {
#the-body > #output:hover > .background-image {
transform: none;
}
.codepen-embed-body {
font-size: 0;
}
}
Какими веб-проектами заняты лучшие умы?
А пока оно «начинает поддерживаться все лучше и лучше» это тоже самое как продолжать использовать бутстрап, понимая, что его в принципе нельзя использовать в готовом уже сверстанном говнокодером проекте, ведь от стандарта там нет даже букв «ст», а постепенно повышающаяся поддерживаемость это как в той истории, где 20% андроидов упало сразу, 40% юзеров сидели на ИЕ, а начальник пользовался айфоном и остался недоволен.
пс. пока для СЕО оптимизации нужно писать функцию «mk_ahref» на 50 строк кода, а перелинковка требует специалиста за пару косарей — это все бултыхание в лягушатнике.
Расскажите, пожалуйста, как современность в вёрстке позволяет получить больше прибыли по сравнению с вёрсткой с большим покрытием.
Адаптивные сайты можно спокойно делать уже очень давно, к тому же технология, с помощью которой делается адаптивность (CSS-media-запроы), обратно-совместима с браузерами, которые её не поддерживают.
Еще старые технологии могут замедлять отрисовку страницы
Можно пример?
Там например есть классический пример пример flexbox против float + %. И замедление может быть еще больше в этой связке, зависит от DOM и других стилей. Но еще конечно не правильное использование новых технологий, тоже может замедлить отрисовку. Но в этом виноват только разработчик, который не читает стандарты и рекомендации.
В вебе постоянно такое — только стандартизатор водки, все программисты тут же начинают изобретать новую вещь, которая заставляет забыть все что было раньше. Обычно в лабораториях используют старые знания, но только не программисты.
А вот с display: grid и fr не все так гладко, поддерживают всего 70% браузеров, 1/3 рынка просто так не выкинишь, это реальное самоубийство для бизнеса…Зависит от бизнеса, на самом деле. Если у вас сайт — приложение к оффлановому бизнесу и важно покрыть всех клиентов, то выкинуть 30% пользователей — самоубийство, если же они к вам именно из браузера и должны приходить, то увеличив удержание в два раза вы легко это 30% «потерянных» закроете.
Но, понятно, такие вещи бизнес должен решать, не разработчик…
Не надо никого выкидывать, новинки можно добавлять понемногу в порядке Progressive Enhancement. Например, динозаврам можно выводить карточки товаров или превьюшки в галерее флоатами или инлайн-блоками (скучно по по левому краю, но ничего не развалится, ни один ослик не пострадает), а новым браузерам выровнять эти же карточки по красивой адаптивной сетке как-нибудь так.
С гридами нам повезло еще и в том, что все браузеры, поддерживающие их, поддерживают и supports(), так что легко применять стили для новых улучшений только там, где нужно (как учит на личном примере легендарный Эрик Мейер:).
В этой статье разбираются примеры использования современных техник (можно прямо на их же сайте сам код посмотреть): Css Grid, CSS 3D, Web Animations API.
Если посмотреть их сайт, голубой фон вверху страницы сделан через грид с использованием
fr. Еще должны быть примеры у них, можно поискать. Сравнивала этот фон в разных браузерах, включая последний IE и Edge, отображается нормально.о новой единице длины в CSS — fr (см. спецификацию).
В этой фразе автор оригинала несколько поторопился: спецификация по ссылке определяет fr не как единицу длины, а как единицу новой размерности CSS — "гибкой длины" (в идеале, flex во флексбоксах тоже должен был быть этой же размерностью, но "хорошая мысля приходит опосля":). Поэтому единица fr имеет смысл только в контексте гридов, и ее нельзя комбинировать с единицами длины в calc(). Возможно, нюанс достаточно тонкий, но я уже видел, как люди на этом спотыкались, так что лучше сразу внести ясность.
Интересная статья. Спасибо
CSS: введение в единицу длины 'fr'