relows, это никакой не кринж, это абсолютно стандартное действие для подобных ситуаций, если вы хотите автоматическое выравнивание контента по границам, исходя из общей высоты.
alex-1917, наверное, у нас разные понимание «работающих» сайтов. Интернет-магазины (2 российских, 6 немецких), пара десятков лендингов (для США и Германии) — чем не рабочие сайты? И да, опять же, проверяю на реальных устройствах, ни разу не было проблем с производительностью. Даже у IE11 нет особых проблем (разве что с viewBox и трансформациями посредством CSS).
Возможно, вам просто лень делать векторные графические материалы :))
DeniSidorenko, да не за что, но это целая система, её нужно изучать. Мои знакомые, которые могут делать сайты подобного уровня на GSAP, получают по 10+ тысяч долларов в месяц :))
alex-1917, зачем такие иконки, размер которых строго 16 пикселей, а иначе они пойдут пиксельной кашей? А если у вас есть потребность сделать их хотя бы по 50 пикселей? Будете делать ещё один файл разрешением выше? А если нужно их анимировать? Поменять цвет иконки в соответствии с цветом текста?
Не совсем понял про подтверждение ваших слов, потому что все три пункта, которые я привёл выше, выступают против ваших аргументов. Когда, к примеру, с командой делали интерактивный лендинг-презентацию для Procter& Gamble, я не представляю, что бы было, если бы мы делали все графические элементы в растровых форматах. Никакой анимации, размытость элементов на экранах с высокой плотностью вкупе с нулевой экономией килобайт и т. п.
Ну или вот тут, на Toster.ru, когда открывается лайтбокс с картинкой, в правом верхнем углу висит пиксельная мыльная иконка крестика — не знаю, как вам, но мне это не очень нравится. Тем более в конце 2018-го года.
1. В 98% случаев меньший размер типичных иконок без размытия (ну тут понятное дело, векторный же формат), чем те же PNG-файлы хотя бы 256 на 256 px и в indexed-цветах.
2. Спокойная inline-встройка кодом, что позволяет, к примеру, менять толщину начертания и цвет + убирает лишний запрос на каждую иконку и убирает возню со спрайтами (ну или же пользоваться use). Вы скажете, что можно в base64 сделать иконки, чтобы не было запроса, но декодирование base64 на стороне клиента — не такое быстрое занятие на слабых устройствах, как хотелось бы.
3. Можно анимировать.
P. S. Не знаю, как вы, я все проекты делаю в SVG (маски, декоративные элементы, иконки, шрифтовые иконки и т. п.). Разве что сложные иллюстрации перевожу в растровые форматы, если они изначально векторные и не оптимизированные. Проблем с SVG не имел, все проекты проверяю (если говорить о iOS) на реальных iPhone 5S, iPhone 7, iPhone X, iPad Air 2 и iPad Pro 12.9". Указанных выше проблем с производительностью не замечал.
alex-1917, что-то у вас не то, открыл свой внутренний проект с порядка 90 ед. различной SVG-графики на iPad Air 2 (iOS 12.1), ничего не тормозит. И там не только иконки, но и парочка сложных иллюстраций.
Потому что время идёт, а делать разметку с помощью float'ов — неудобно. Flexbox абсолютно нормально поддерживается всеми браузерами, начиная даже с IE11. Поэтому критика float'ов обоснованная.
Если нужна поддержка более архаичных браузеров — тогда иное дело. Но типичные проекты уже лучше делать на Flexbox.
P. S. Время Grid ещё не совсем настало, на мой взгляд.
На мой взгляд, хоть я тоже и не так часто пользуюсь Photoshop, но знать его необходимо, потому как веб-дизайн не ограничивается только IT-тематикой сайта, где одни градиенты и SVG-формы.
Есть задачи, когда для хорошего дизайна нужно подготовить, собрать качественную иллюстрацию, отретушировать фото, провести цветокоррекцию, качестенно обтравить объект и т. д.
И не всегда рядом будет человек, который, во-первых, хорошо знает данный инструмент, а во-вторых, может точно понять замысел дизайнера.
Да, макеты собирать, рисовать UI/UX в Photoshop — неудобно, для этого есть иные инструменты. Но знание PS — вещь очень и очень хорошая.
caof19, ну, у текста же при наведении можно менять цвет. Если будет шрифтовая иконка — принцип тот же, потому что это тот же шрифт. Разницу между SVG и шрифтовой иконкой в плане изменения цвета я описал ниже. Если вставлять SVG через тэг use — с иконкой будет невозможно взаимодействовать.
Кроме того, внизу человек вам написал решение, как использовать тэг img и соответствовать при этом вашим требованиям (с помощью role="presentation").
profesor08, вполне спокойно можно с помощью clip-path на основе опорных точек с координатами, к примеру, calc(100% - 50pх), где 50px — высота зоны скоса. Пример: proappliancerepair.com
Там комиссия 3,9 процента, что не мало. Кроме этого, не до конца понял, как активировать не просто оплату по PayPal, но и с помощью кредиток. Но самое главное — лишний процент по сравнению сo Stripe.
