Касаемо базовых знаний по чистому и глубокому HTML и CSS в вузах — это утопия. Там такого просто нет, оно никуда в программу не ложится.
По JS ещё могут что-то глубокое дать, так как это более вузовская тема. И народ любит позаползать в фундаментальную теорию.
Но чтобы в вузе глубоко разбирали вёрстку, ну или хотя бы глубоко заползали в алгоритмы раскладки (типа флексбокса), опираясь на спеки — такого почти нигде нет. А ведь разбор фундаментальных алгоритмов на базе первоисточников — это и есть уровень вуза.
ну, когда рынок стравливает низкоквалифицированные кадры с перегретыми зарплатами, больно становится всем. так-то ведь нездоровая была ситуация, когда "мидл" с 2 годами опыта, а по факту сборщик-на-реакте-из-готовых-компонентов получал 150+. а откуда там навыков и глубокого понимания просто чистого js возьмётся на такую зп, даже не говоря о владении всем стеком фронта (чистая вёрстка, чистый js, фреймор). вот от всей этой красоты и избавляются радостно
Без псевдоэлементов сделал для наглядности, задача была показать проблемы со сложным фоном карточки. Новое свойство для этой задачи действительно есть в разработке, но ещё на ооочень ранней стадии. Так что когда-то о нём напишу
Спасибо, поигрался с вашими вариантами. Честно говоря, убедился что для таких простых задач маски намного лучше, чем clip-path
С точки зрения поддержки вариант с SVG сопоставим с масками. Но он требует тащить в проект отдельное свг-изображение. Само это изображение надо предварительно где-то отрисовать. И вот вопрос — а зачем мне тащить в реализацию свг, если я справляюсь одним свойством без SVG
Вариант на shape плохо поддерживается, синтаксис намного сложнее, да и форма выреза получилась не круглой, а какой-то овальной.
Единственный аргумент за усложнение своей жизни с clip-path — это производительность. Но у меня огромные сомнения, что маски по производительности отличаются от клип-пасов. Может быть есть ссылки на статьи, где этот вопрос разбирается? Я где-то слышал (но сам не проверял), что маски рендерятся на GPU, и если это так, то с производительностью там должно быть всё отлично.
А можете прислать пример реализации такого же выреза на clip-path?
И если под рукой завалялась спека или какая-то другая техническая статья про производительность двух методов, буду благодарен, хочу покопать этот вопрос
Посмотрите на скриншот ниже. С внешней тенью отлично справляется. С внутренней — нет.
Но смысл статьи не в этом. Раньше для простых вырезов нужно было делать сложную реализацию, и для сложных вырезов тоже нужно было делать сложную реализацию.
А сейчас для простых вырезов у нас есть простейшее решение в одну строчку. А для сложных вырезов остаются сложные решения, никуда не деться. Но как минимум появляется возможность искать компромисс с дизайнером "упрощаем дизайн и делаем блок за 5 минут" или "оставляем сложный дизайн и убиваем на реализацию день"
Большинство интерактивных учебников программирования плохо сочетаются с мобильными версиями. Дело в том, что никто по-серьёзному на мобилке не программирует. А в таких учебниках самое важное — это набор больших объёмов кода. Это как делать полноценныый вёрд или эксель для мобилок — толку мало
Касаемо базовых знаний по чистому и глубокому HTML и CSS в вузах — это утопия. Там такого просто нет, оно никуда в программу не ложится.
По JS ещё могут что-то глубокое дать, так как это более вузовская тема. И народ любит позаползать в фундаментальную теорию.
Но чтобы в вузе глубоко разбирали вёрстку, ну или хотя бы глубоко заползали в алгоритмы раскладки (типа флексбокса), опираясь на спеки — такого почти нигде нет. А ведь разбор фундаментальных алгоритмов на базе первоисточников — это и есть уровень вуза.
ну или он очень специфичный и собеседущие сами про такие тонкости не знают =) это не про отличие блочных и строчных спрашивать
ну, когда рынок стравливает низкоквалифицированные кадры с перегретыми зарплатами, больно становится всем. так-то ведь нездоровая была ситуация, когда "мидл" с 2 годами опыта, а по факту сборщик-на-реакте-из-готовых-компонентов получал 150+. а откуда там навыков и глубокого понимания просто чистого js возьмётся на такую зп, даже не говоря о владении всем стеком фронта (чистая вёрстка, чистый js, фреймор). вот от всей этой красоты и избавляются радостно
Кстати вот метафора с одномерной и двумерной сеткой — одна из самых неудачных, которая появлялась во фронтенде, но прижилась так, что не выжечь
Надо еще каверзный вопрос про ссылку, в которую можно положить див, добавить
сейчас и мидл+ до собесов не доходит, так что некоторые скручивают до джуна, чтобы хоть куда-то попасть
Без псевдоэлементов сделал для наглядности, задача была показать проблемы со сложным фоном карточки. Новое свойство для этой задачи действительно есть в разработке, но ещё на ооочень ранней стадии. Так что когда-то о нём напишу
Спасибо, поигрался с вашими вариантами. Честно говоря, убедился что для таких простых задач маски намного лучше, чем
clip-pathС точки зрения поддержки вариант с SVG сопоставим с масками. Но он требует тащить в проект отдельное свг-изображение. Само это изображение надо предварительно где-то отрисовать. И вот вопрос — а зачем мне тащить в реализацию свг, если я справляюсь одним свойством без SVG
Вариант на shape плохо поддерживается, синтаксис намного сложнее, да и форма выреза получилась не круглой, а какой-то овальной.
Единственный аргумент за усложнение своей жизни с
clip-path— это производительность. Но у меня огромные сомнения, что маски по производительности отличаются от клип-пасов. Может быть есть ссылки на статьи, где этот вопрос разбирается? Я где-то слышал (но сам не проверял), что маски рендерятся на GPU, и если это так, то с производительностью там должно быть всё отлично.В случае с вырезами пользователи старых браузеров отлично обойдутся и без них
Это камень в огород дизайнеров или тех, кому приходится их задумки реализовывать? =)
А можете прислать пример реализации такого же выреза на clip-path?
И если под рукой завалялась спека или какая-то другая техническая статья про производительность двух методов, буду благодарен, хочу покопать этот вопрос
Ну не у всех же сервисы на миллионы юзеров. Для огромного количества сегментов вайдли авайлаболь и даже ньюли авайлаболь уже достаточно
отличная поддержка, в статье отдельный заголовок под это отведён. widely avaliable уже через пару месяцев будет
Посмотрите на скриншот ниже. С внешней тенью отлично справляется. С внутренней — нет.
Но смысл статьи не в этом. Раньше для простых вырезов нужно было делать сложную реализацию, и для сложных вырезов тоже нужно было делать сложную реализацию.
А сейчас для простых вырезов у нас есть простейшее решение в одну строчку. А для сложных вырезов остаются сложные решения, никуда не деться. Но как минимум появляется возможность искать компромисс с дизайнером "упрощаем дизайн и делаем блок за 5 минут" или "оставляем сложный дизайн и убиваем на реализацию день"
Приятно видеть ценителя вырезов =)
вот быстрый пример. специально сделал красную тень
Внешние тени решаются обёрткой со свойством
filter: drop-shadow(...)Не помню только, поддерживает ли этот фильтр внутренние тениБольшинство интерактивных учебников программирования плохо сочетаются с мобильными версиями. Дело в том, что никто по-серьёзному на мобилке не программирует. А в таких учебниках самое важное — это набор больших объёмов кода. Это как делать полноценныый вёрд или эксель для мобилок — толку мало
всё-таки, он даёт другую форму
не делайте интерактивные элементы с такими вырезами, тогда проблемы не возникнет.