Вадим, какой же ты крутой, твой профессионализм служит для меня стандартом того, чему надо стремиться, а харизма и способ подачи материала - проводник на этом пути. Надеюсь, твой энтузиазм желание делиться своим опытом никогда не иссякнет, да хранит тебя Карло Акутис!
На самом деле это практически самая распространённая задача в вёрстке. В интернете куча примеров косых. Но наконец-то есть человек, который объясняет просто, как надо делать правильно. Вообще очень жаль, что нет кнопку, которая удаляет всю ту чушь, которая говорит о том, как делать неправильно. И это касается абсолютно всего.
Нужно текст обернуть в span и ему задать margin-left. И через first-child указать что у первого элемента margin: 0. И когда иконка исчезнет, то margin обнулится :) а у иконки его и так нет:) шах и мат скептики:)
За gap в Flex большое спасибо. Не знал. Grid усердно учил, но ради правильного подвала на странице не использовал в связи с одной неадекватной проблемой, которую не мог решить - блок внутри грида не принимал 100% от рассчитанной ширины, где внутри были флексы. Но! Применения и уникальность Гриду я нашел и он незаменим! Мы пишем блоки в любом порядке, а отображаем по указанной схеме как нам нужно. В одном проекте я заменил таблицу на грид, поскольку таблица при сжатии может только сжиматься, а текст внутри переносится, но если столбцов 5-6, то на маленьком экране выглядит очень некрасиво и тогда нам нужно перерисовать таблицу целиком так, чтоб некоторые значения ставали рядом не по вертикали, а делили горизонталь и тоже самое в шапке таблицы. Как такое сделать в таблице? Никак. Можно только две таблицы делать и одну прятать, а другую показывать. Но получается, что нам наплевать на СЕО и роботов поисковика. Спам. А с Гридом мы можем сделать таблицу широкую или компактную. Пример сдесь chistota.kiev.ua/city-kiev/6-generalnaya_uborka.html (таблица с ценами)
спасибо, Вадим, очень интересно ! Задумался сразу, а ведь я тоже использую гриды только когда не нахожу других вариантов. После этого рассказа, возможно мне будет легче использовать гриды по умолчанию, без задания размеров сетки :) Однако задумался, а как бы я задавал отступ для иконки этой кнопки, не посмотрев видео, и не думая о свойстве gap ... И в том случае я бы чуть задумался и писал такое: .button__icon + .button__text { margin-left: 10px }. :) Однако, согласен полностью, с gap это стало выглядеть изящнее и проще )
У меня тоже постоянно в голове мысль, а правильно ли я делаю что-то на CSS, хотя верстаю уже 10 лет. Надо быть очень увлеченным чтобы на всё ответы знать (искать), у тебя это получается отлично. Так держать, у тебя есть чему поучиться!
Вадим, спасибо за ваш труд! Зачастую, ограничиваюсь гридами только из-за поддержки старых браузеров) Хотелось бы услышать про все нюансы браузера Сафари от вас.
Использую в основном гриды для более сложных конструкций (типа галлереи), а также там, где нужна чёткая структура, всё по линиям. Был очень рад, когда узнал, что gap с флексами работает ... до того момента пока не открыл сафари, в итоге пришлось во всём проекте эмулировать gap с помощью двухстороннего margin и отрицательного у контейнера. Колхоз, не красиво, но работает и в сафари в том числе ) Вообще тема очень интересная, лайк от меня )
Гриды в кнопках - фантастика и подумать и могу что можно это свойство к ним применять! А еще все чаще убеждаюсь в том, что только за счет оверпрайснутой стоимости техники яблочной компании, большинство людей считают интернет эксплорер плохим браузером!)))
Вадим, спасибо за видео! Также был убеждён что гриды должны быть в только в основе страницы. Переубедили) Буду пробовать использовать их и на других элементах!
@@pepelsbey если что, это не буквально. Имеется в виду, что в Сафари настолько много багов, что его можно сранить с IE 10 лет назад. И это не только мое субьективное мнение. Я использую Хром во время работы и во время работы уверен, что FF и Edge будут работать также хорошо, но не Safari. Там всегда есть проблемы. Хоть минимальные, но есть. И это я не говорю еще о мобильном Сафари.
Отличная работа, Вадим! Спасибо!) На счёт поддержки display: grid/flex у тега button: тоже столкнулся с такой проблемой, конкретно с поддержкой flex у кнопки в safari, года эдак 3-4 назад. Не знаю, побороли ли они эту проблему в своем браузере, но теперь мне страшно использовать flex напрямую для тега button в принципе. Вместо этого, оборачиваю внутреннее содержимое кнопки в блок и уже ему задаю display: flex/grid. Да это некрасиво, но это работает в safari)
Как раз недавно столкнулся с этим и вот вышел видос. Зашёл я такой узнать что и где использовать, а мне говорят используй что хочешь и где хочешь))) Круто! Спасибо за видео! (феечка CSS топ. Должна быть на следующий футболке)
Спасибо за объяснение где, что нужно использовать. Видео как и всегда на высоте: Быстро, четко, по теме, с юмором! Приятно смотреть - трудно оторваться. Пошел искать ссылку под видео как стать патроном, хочу первым смотреть такие видосики =))). Такие проекты нужно поддерживать 😍
Читал книгу "CSS in Depth", так вот там был ответ на данный вопрос такой. Grid лучше использовать для разметки больших блоков, flex для элементов внутри этих блоков
Читал книку «Depth in CSS», там был ответ на данный вопрос: флексы лучше использовать для больших блоков, гриды внутри для элементов. Видите, оба наши мнения имеют один и тот же вес, пока в них не добавить аргументацию. Но даже тогда это будет личным выбором каждого. В этом видео я постарался показать, как гриды могут быть где угодно и нет никаких ограничений, только ваше удобство.
Блин, спасибо за спойлер) Потому что я такой: "Хм... А что, есть какие-то правила? Разве я не могу их использовать как хочу?" А вон тут все в заголовке написано)
Используйте CSS Grid только в крайних случаях: 1) вы не можете обойтись без изменения позиционирования элементов в CSS 2) вы не можете флексами сделать так, чтобы некоторые границы пересекались крестиком Иначе рискуете напороться на проблемы с гридами, и придется переделывать все на flex. CSS Grid не является заменой flex, и не нужно все верстать на гридах.
Используйте флексы только в крайних случаях: 1. Вы не можете обойтись без изменения позиционирования в CSS 2. Вы не можете гридами сделать так, чтобы некоторые границы пересекались крестиком Иначе вы рискуете напороться на проблемы с флексами и придётся всё переделывать на гридах. Флексы не являются заменой гридам, и не нужно всё верстать на флексах.
Я подумал, что будет интересно перевернуть вашу фразу. Она звучит так же «аргументированно», но утверждает обратное. Мне кажется, что в вас говорит привычка и подспудные страхи перед новым.
В сафари кажется grid-column-gap сработает. Раньше тоже маялся с вопросом а использовать ли где то в кнопках гриды. А потом плюнул и начал использовать везде, где они хорошо выполняли свою роль)
Там, к сожалению, в принципе display: grid не срабатывает на кнопке. Точнее, не срабатывал - только что приехал апдейт 14.0.1, где это починили. Вот же хитрецы.
Как всегда круто! Лайк. Хотелось бы увидеть видео с Сафари что там все плохо или что-то работает(Только канул ie теперь Сафари даже шрифты там работают по-своему уже сталкивался везде нормальной шрифт работал в сафари же он становился жирным.)
Вадим, как всегда, спасибо за полезный контент! К флексам привык, а гриды всегда привлекают своими возможностями) как только гриды и в сафари будут работать отлично, то думаю большинство на гриды перейдёт) не без Вашего участия)
Для себя решил так. Начал использовать гриды на проекте для вёрстки сетки элементов с плиточным/карточным интерфейсом. В остальном пока только флексы. И у меня нет поддержки старых браузеров :)
Борюсь с убеждением, что использовать grid не стоит нигде, кроме сетки. В этом же убеждено и большинство моих коллег, которые крутят пальчиком у виска, когда я пытаюсь убедить их в обратном. Спасибо большое за полезное видео! )
Доброго времени Вадим. Очень отличные ролики, смотрю с большим удовольствием. После просмотра данного видео не могу ответить себе на вопрос, может быть вы раскроете мне глаза. Вопрос следующий - почему после того как мы задали элементам "а" и "button" объявление display: grid или flex, то ссылка ведёт себя предсказуемо, а именно растягивается на всю ширину родителя, в то время как элемент button этого не делает, а пляшет исключительно от своего содержимого. Вот так задачка. Всю голову уже сломал, никак не могу найти ответа. Есть конечно предположения что это связано с их изначальным значением display, но с другой стороны мы же его переопределяем. Буду рад если вернете моё психическое состояние в изначальное положение, а то уже не могу больше ни о чём думать. Заранее спасибо.
Вадим, не перестану говорить Вам спасибо! За Вашу работу, разборы, интерес к своему делу. да и в целом, умеете Вы заинтересовать и заставить подумать. Мало того, теперь еще и о механической клавиатуре постоянно думаю) подскажите, пожалуйста, что можно взять новичку в этом деле? Чтобы Вы посоветовали?
Да в страпе ничего такого, вы сами можете продумать и сотворить свой. Просто заранее определите классы для поведения элементов, я лично использую класс который определяет флекс и флекс колумн. Просто запарился как то печатать постоянно. Мне правда проще я фул стек. Удачи в освоении, начинайте учить бекенд, это поможет в понимании вёрстки, как бы странно это не звучало. Если будут вопросы не стесняйтесь gleb.sharapov@yahoo.com .
Почувствовать, что гриды медленнее, скажем, флексов у вас получится, если всё остальное идеально оптимизируете и вам станет скучновато. Так что не переживайте :)
Вот всё время и останавливает от использования гридов то, что беда с ними что в десктопном сафари, что в мобильном... А заказчики часто смотрят с айфонов результаты вёрстки
@@pepelsbey ну то что gap в сафари не работает и у меня ещё какие-то проблемы с кнопками были под мобильным сафари, сейчас уже точно не вспомню. Спасибо за видео и за ссылку, поизучаю =)
Вадим добрый день.Хочу спросить не по теме.Есть ли у тебя видео про то, как правильно использовать в верстке margin и padding.Не могу найти хорошее виде, где будет объяснено какое и как свойство правильно применять чтобы верстка не ломалась.
Спасибо за видео Вадим! У меня только один вопрос, не загружает ли такой подход CSS парсер внутри браузера? То есть возможно ли для CSS парсера удобнее и быстрее будет рассчитывать и парсит и создавать CSSOM с margin-right вместо grid gap?
Вы слишком много переживаете за парсинг и работу CSS, это далеко не самое узкое место в современном фронтенде. Так что нет, гриды с гэпами не медленнее отступов - по крайней мере, вы не сможете это уверенно определить в реальных условиях.
00:00 Интро
00:11 Флексы и гриды
01:52 Ошибочная картина
02:30 Постановка задачи
02:52 Вёрстка кнопок
04:50 Вставка иконок
05:52 Подгонка иконок
07:32 Выравнивание иконок
08:18 Добавление гридов
09:43 Отступ от иконки
11:25 Гэпы во флексах
12:27 Кроссбраузерность
13:41 Беда с кнопками
14:40 Обман
15:34 Вывод
16:25 Аутро
Вёрстка, гриды, флексы - я лично сюда хожу на футболки посмотреть. Вадим ещё ни разу не подводил с этим делом.
Футболки кончаются, пошли повторы (
@@pepelsbey Надо будет задонатить на футболку, а то Вадиму не в чем появляться на видео :)
😂😂😂
Пролетающая фея - это просто топ 😂
Тоже вскрикнул❤️
Вадим, какой же ты крутой, твой профессионализм служит для меня стандартом того, чему надо стремиться, а харизма и способ подачи материала - проводник на этом пути. Надеюсь, твой энтузиазм желание делиться своим опытом никогда не иссякнет, да хранит тебя Карло Акутис!
Отдельное спасибо за currentColor! не перестаю удивляться CSS
Вау. Актуальный контент. Поражаюсь тому как люди делятся своим опытом. И как мы раньше жили без ютуба =)
Я вроде бы завязал верстать, уже год работаю на стройке посмотрел это видео и понял, надо что сверстать
Возвращайтесь, у нас тут тоже интересно
Вадим, спасибо Вам за этот обзор! Все отлично объяснено!⚡
На самом деле это практически самая распространённая задача в вёрстке. В интернете куча примеров косых. Но наконец-то есть человек, который объясняет просто, как надо делать правильно. Вообще очень жаль, что нет кнопку, которая удаляет всю ту чушь, которая говорит о том, как делать неправильно. И это касается абсолютно всего.
Нужно текст обернуть в span и ему задать margin-left. И через first-child указать что у первого элемента margin: 0. И когда иконка исчезнет, то margin обнулится :) а у иконки его и так нет:) шах и мат скептики:)
Действительно, звучит гораздо проще!
супер ! все просто и понятно
Спасибо, очень удобно и доступно
За gap в Flex большое спасибо. Не знал. Grid усердно учил, но ради правильного подвала на странице не использовал в связи с одной неадекватной проблемой, которую не мог решить - блок внутри грида не принимал 100% от рассчитанной ширины, где внутри были флексы. Но! Применения и уникальность Гриду я нашел и он незаменим! Мы пишем блоки в любом порядке, а отображаем по указанной схеме как нам нужно. В одном проекте я заменил таблицу на грид, поскольку таблица при сжатии может только сжиматься, а текст внутри переносится, но если столбцов 5-6, то на маленьком экране выглядит очень некрасиво и тогда нам нужно перерисовать таблицу целиком так, чтоб некоторые значения ставали рядом не по вертикали, а делили горизонталь и тоже самое в шапке таблицы. Как такое сделать в таблице? Никак. Можно только две таблицы делать и одну прятать, а другую показывать. Но получается, что нам наплевать на СЕО и роботов поисковика. Спам. А с Гридом мы можем сделать таблицу широкую или компактную. Пример сдесь chistota.kiev.ua/city-kiev/6-generalnaya_uborka.html (таблица с ценами)
Ваууу, align-items в гридах!!! Здорово!!!
…
Ниче, что и у флексов он есть и иконки ровняются тоже не плохо, коть в bg, хоть так
Вы кажется не поймали самую главую идею этого видео: используйте что хотите, где хотите. Разрешаю!
Боже, какой офигенный канал. Спасибо тебе, ты так приятно преподносишь контент, такое объяснение, атмосфера видео. Супер!
спасибо, Вадим, очень интересно ! Задумался сразу, а ведь я тоже использую гриды только когда не нахожу других вариантов. После этого рассказа, возможно мне будет легче использовать гриды по умолчанию, без задания размеров сетки :) Однако задумался, а как бы я задавал отступ для иконки этой кнопки, не посмотрев видео, и не думая о свойстве gap ... И в том случае я бы чуть задумался и писал такое: .button__icon + .button__text { margin-left: 10px }. :) Однако, согласен полностью, с gap это стало выглядеть изящнее и проще )
Как вовремя я вас нашла.)
У меня тоже постоянно в голове мысль, а правильно ли я делаю что-то на CSS, хотя верстаю уже 10 лет. Надо быть очень увлеченным чтобы на всё ответы знать (искать), у тебя это получается отлично. Так держать, у тебя есть чему поучиться!
Вадим, спасибо за ваш труд! Зачастую, ограничиваюсь гридами только из-за поддержки старых браузеров) Хотелось бы услышать про все нюансы браузера Сафари от вас.
Использую в основном гриды для более сложных конструкций (типа галлереи), а также там, где нужна чёткая структура, всё по линиям. Был очень рад, когда узнал, что gap с флексами работает ... до того момента пока не открыл сафари, в итоге пришлось во всём проекте эмулировать gap с помощью двухстороннего margin и отрицательного у контейнера. Колхоз, не красиво, но работает и в сафари в том числе )
Вообще тема очень интересная, лайк от меня )
Калассссно рассказывает 👍👍👍👍👍
Большое Спасибо!
Эх, надо проработать гриды. Чет всё на флексах делаю :(
Жиза...
Но так не хочется с флексов уходить, тут всё так просто
Такая же фигня))
у гридов поддержка хуже
@@alenache1 уже не)
прям как у нас на работе) гриды и флексы для разных целей. Перепутаешь- атата!
И какие у вас там правила?
@@pepelsbey скелет сайта на гридах, внутренние блоки с помощью флексов
А если гриды в кнопке, то публичная порка? Ну что за религиозные глупости.
Вадим ты красавчик, жаль что нет новых выпусков.
Спасибо огромное за отличное объяснение, благодарен, что увидел Ваш канал. Надеюсь когда-нибудь вы продолжите выпускать новые видео!
Очень круто
Спасибо Вадим.
Вадим, спасибо за урок. Теперь стало понятнее, почему гриды лучше использовать...
Хорошо рассказал)
Гриды в кнопках - фантастика и подумать и могу что можно это свойство к ним применять! А еще все чаще убеждаюсь в том, что только за счет оверпрайснутой стоимости техники яблочной компании, большинство людей считают интернет эксплорер плохим браузером!)))
Нет, цены на технику тут совсем не причём. Просто есть браузеры, которые тормозят. Таким был IE, похоже ведёт себя Safari.
Вадим, спасибо за видео! Также был убеждён что гриды должны быть в только в основе страницы. Переубедили) Буду пробовать использовать их и на других элементах!
Вадим, благодарю! Как всегда все четко и понятно
Спасибо.
Спасибо! еще один кирпичик в мой фундамент знаний)
Полезный видос, Вадим! Спасибо! Обертка внутри кнопок спасет мир.
Сафари - это современный IE. Все возможные баги можно найти именно в этом браузере.
Вы неправы, Safari - это современный Safari. Положение и ситуации браузеров несравнимы.
@@pepelsbey если что, это не буквально. Имеется в виду, что в Сафари настолько много багов, что его можно сранить с IE 10 лет назад. И это не только мое субьективное мнение. Я использую Хром во время работы и во время работы уверен, что FF и Edge будут работать также хорошо, но не Safari. Там всегда есть проблемы. Хоть минимальные, но есть. И это я не говорю еще о мобильном Сафари.
Большое спасибо Вам за видео, было очень полезно, особенно благодаря примерам с кнопками, теперь буду пользоваться гридами чуть свободнее)
Отличная работа, Вадим! Спасибо!) На счёт поддержки display: grid/flex у тега button: тоже столкнулся с такой проблемой, конкретно с поддержкой flex у кнопки в safari, года эдак 3-4 назад. Не знаю, побороли ли они эту проблему в своем браузере, но теперь мне страшно использовать flex напрямую для тега button в принципе. Вместо этого, оборачиваю внутреннее содержимое кнопки в блок и уже ему задаю display: flex/grid. Да это некрасиво, но это работает в safari)
Как раз недавно столкнулся с этим и вот вышел видос. Зашёл я такой узнать что и где использовать, а мне говорят используй что хочешь и где хочешь))) Круто!
Спасибо за видео! (феечка CSS топ. Должна быть на следующий футболке)
Огромное Вам, Вадим, спасибо. Я - в восторге! Просто чудесно! Успехов!
Мне подача материала понравилась. благодарю
Спасибо, очень полезный контент!
От себя могу сказать, использовать надо, что лучше ложиться Вам в голову и не противоречит принятому в проекте.
Очень здорово, спасибо!)
Спасибо за объяснение где, что нужно использовать. Видео как и всегда на высоте: Быстро, четко, по теме, с юмором! Приятно смотреть - трудно оторваться. Пошел искать ссылку под видео как стать патроном, хочу первым смотреть такие видосики =))). Такие проекты нужно поддерживать 😍
Спасибо 🥰
Спасибо за видео! Отличная мысль!!! Всегда так делал, за что не раз был осужден коллегами, теперь буду просто отправлять на Ваше видео)
Надпись на футболке как бы говорит :)
На фразе рельсы в начале, в голове возникла мысль сразу про Ruby on Rails
Читал книгу "CSS in Depth", так вот там был ответ на данный вопрос такой. Grid лучше использовать для разметки больших блоков, flex для элементов внутри этих блоков
Читал книку «Depth in CSS», там был ответ на данный вопрос: флексы лучше использовать для больших блоков, гриды внутри для элементов.
Видите, оба наши мнения имеют один и тот же вес, пока в них не добавить аргументацию. Но даже тогда это будет личным выбором каждого. В этом видео я постарался показать, как гриды могут быть где угодно и нет никаких ограничений, только ваше удобство.
Спасибо большое! Не так давно в вертске и все удивляюсь, как люди не пользуются гридами, ведь это такой на самом деле мощный инструмент.
Привычка, я вот года два на флексах верстаю
zdorovo
Блин, спасибо за спойлер) Потому что я такой: "Хм... А что, есть какие-то правила? Разве я не могу их использовать как хочу?" А вон тут все в заголовке написано)
Спасибо! использую и гриды и флексы, но для разных задач. Есть блок с флексами и есть блок с гридами, гриды в основном для фото...
Используйте CSS Grid только в крайних случаях:
1) вы не можете обойтись без изменения позиционирования элементов в CSS
2) вы не можете флексами сделать так, чтобы некоторые границы пересекались крестиком
Иначе рискуете напороться на проблемы с гридами, и придется переделывать все на flex. CSS Grid не является заменой flex, и не нужно все верстать на гридах.
Используйте флексы только в крайних случаях:
1. Вы не можете обойтись без изменения позиционирования в CSS
2. Вы не можете гридами сделать так, чтобы некоторые границы пересекались крестиком
Иначе вы рискуете напороться на проблемы с флексами и придётся всё переделывать на гридах. Флексы не являются заменой гридам, и не нужно всё верстать на флексах.
Я подумал, что будет интересно перевернуть вашу фразу. Она звучит так же «аргументированно», но утверждает обратное. Мне кажется, что в вас говорит привычка и подспудные страхи перед новым.
Спасибо, за информацию, было интересно!!
Сразу влюбился в канал🙏 Спасибо за ваши труды!!!
Вадим, здравсвуйте. Очень актуальная тема. Спасибо большое за объяснение)
В сафари кажется grid-column-gap сработает. Раньше тоже маялся с вопросом а использовать ли где то в кнопках гриды. А потом плюнул и начал использовать везде, где они хорошо выполняли свою роль)
Там, к сожалению, в принципе display: grid не срабатывает на кнопке. Точнее, не срабатывал - только что приехал апдейт 14.0.1, где это починили. Вот же хитрецы.
Как всегда круто! Лайк. Хотелось бы увидеть видео с Сафари что там все плохо или что-то работает(Только канул ie теперь Сафари даже шрифты там работают по-своему уже сталкивался везде нормальной шрифт работал в сафари же он становился жирным.)
Вадим, как всегда, спасибо за полезный контент!
К флексам привык, а гриды всегда привлекают своими возможностями) как только гриды и в сафари будут работать отлично, то думаю большинство на гриды перейдёт) не без Вашего участия)
navi davi!
Хороший контент, красавчик. Отличная подача.
Для себя решил так. Начал использовать гриды на проекте для вёрстки сетки элементов с плиточным/карточным интерфейсом. В остальном пока только флексы. И у меня нет поддержки старых браузеров :)
Надеюсь, что я всё же зародил зерно сомнения и когда вам нужно будет сделать сложную раскладку в кнопке, вы вспомните про гриды
Как обычно-safari умножает на ноль прогресс в css и это видео тоже
А как же старый добрый селектор * + * внутри кнопки с margin left ?)
А вообще крутая идея видео, теперь дождаться бы Сафари и можно праздновать😎
Да, сова * + * тоже сработает :) Но с гэпами гораздо лучше. Что интересно, в Safari 14.0.1 (только что вышло обновление) гриды уже заработали.
Посмотрю после работы, но за название (особенно последние 3 слова) уже лайк)
Борюсь с убеждением, что использовать grid не стоит нигде, кроме сетки. В этом же убеждено и большинство моих коллег, которые крутят пальчиком у виска, когда я пытаюсь убедить их в обратном. Спасибо большое за полезное видео! )
Очень полезно! Хорошо обобщил
Спасибо, открыл глаза на этот стереотип
Доброго времени Вадим. Очень отличные ролики, смотрю с большим удовольствием. После просмотра данного видео не могу ответить себе на вопрос, может быть вы раскроете мне глаза. Вопрос следующий - почему после того как мы задали элементам "а" и "button" объявление display: grid или flex, то ссылка ведёт себя предсказуемо, а именно растягивается на всю ширину родителя, в то время как элемент button этого не делает, а пляшет исключительно от своего содержимого. Вот так задачка. Всю голову уже сломал, никак не могу найти ответа. Есть конечно предположения что это связано с их изначальным значением display, но с другой стороны мы же его переопределяем. Буду рад если вернете моё психическое состояние в изначальное положение, а то уже не могу больше ни о чём думать. Заранее спасибо.
Балдеж! Спасибо!
Спасибо Вам, рад что вас нашел
Подписался
Спасибо)
Вадим, не перестану говорить Вам спасибо! За Вашу работу, разборы, интерес к своему делу. да и в целом, умеете Вы заинтересовать и заставить подумать. Мало того, теперь еще и о механической клавиатуре постоянно думаю) подскажите, пожалуйста, что можно взять новичку в этом деле? Чтобы Вы посоветовали?
Вам спасибо, что смотрите :) Начать можно с SK64, она недорогая, сравнительно свежая и есть варианты с разными переключателями и блютусом.
@@pepelsbey Спасибо! Думаю, на НГ можно себе подарок сделать )
Круто, очень круто )
Лайк и подписка!
Ставлю Вас пример в нашей онлайн-школе IT-технологий)
Оч крутой контент, спасибо за старания))
Люди, о которых речь в первую минуту: вчера были большие, но по пять, а сегодня маленькие, но по три.
Учусь верстать недавно, не успел нахвататься ограничений, "верстаю как хочу".
Видимо еще не прошел школу бутстрапа.
Да в страпе ничего такого, вы сами можете продумать и сотворить свой.
Просто заранее определите классы для поведения элементов, я лично использую класс который определяет флекс и флекс колумн. Просто запарился как то печатать постоянно. Мне правда проще я фул стек.
Удачи в освоении, начинайте учить бекенд, это поможет в понимании вёрстки, как бы странно это не звучало.
Если будут вопросы не стесняйтесь gleb.sharapov@yahoo.com .
Вадим, как обычно, на высоте!! так держать
Можно реализовать все это дело через @supports и никаких оберток не нужно будет делать.
Дошел до конпки лайка табом и нажал пробел. И понял что это удобно
Если одна иконка осталась можно ей задать марджин-райт:0 если она only-of-type, например
…или просто использовать gap, чтобы код читался легче )
Гриды тоже в основном для структурных элементов использовал
Как всегда на высоте.
Сейчас гэпы на флексах в сафари работают
Красота - это здорово! А кто-нибудь сравнивал скорость всего этого "хозяйства"?
Почувствовать, что гриды медленнее, скажем, флексов у вас получится, если всё остальное идеально оптимизируете и вам станет скучновато. Так что не переживайте :)
лайк за спойлер
Сэкономил вам 17 минут
Вот не понимал я гридов и их пользы...кажись меня просветили!:)Спасибо!
т.е. для совместимости лучше не использовать совсем новые функции
Вот всё время и останавливает от использования гридов то, что беда с ними что в десктопном сафари, что в мобильном... А заказчики часто смотрят с айфонов результаты вёрстки
Беда в каком смысле? Есть коллекция проблем с гридами github.com/rachelandrew/gridbugs
@@pepelsbey ну то что gap в сафари не работает и у меня ещё какие-то проблемы с кнопками были под мобильным сафари, сейчас уже точно не вспомню. Спасибо за видео и за ссылку, поизучаю =)
Вадим добрый день.Хочу спросить не по теме.Есть ли у тебя видео про то, как правильно использовать в верстке margin и padding.Не могу найти хорошее виде, где будет объяснено какое и как свойство правильно применять чтобы верстка не ломалась.
Это слишком базовые знания, их нужно подробно и специально готовить. Я целюсь в уже практикующих разработчиков в своих видео.
Понял.Спасибо.Я не прошу Вас обьяснять, думал что есть ресурс или может видео хорошее, где это подробно рассказано.
Мне бы такую фею, которая за меня верстать будет)
досмотрел до окнца в надежде увидеть ...
button > not(:first-child) {
margin-left: 0.4em;
}
Это сильно проще, хотите сказать?
@@pepelsbey универсально, везде работает, и не нужно для каждого элемента прописывать.
Вадим Макиавелли. Интригой заманил в гапы.
👍
В общем сидим пока на margin-right
Да нет, одновремено с выходом видео появилась Safari 14.0.1, где гриды заработали в кнопках.
Safari is the new IE 6
Сравнение некорректное, на мой взгляд. Но ваши эмоции я разделяю.
@@pepelsbey Ну да, не совсем корректное, просто
Orange Is the New Black именно такую формулировку использует :)
Спасибо за видео Вадим! У меня только один вопрос, не загружает ли такой подход CSS парсер внутри браузера? То есть возможно ли для CSS парсера удобнее и быстрее будет рассчитывать и парсит и создавать CSSOM с margin-right вместо grid gap?
Вы слишком много переживаете за парсинг и работу CSS, это далеко не самое узкое место в современном фронтенде. Так что нет, гриды с гэпами не медленнее отступов - по крайней мере, вы не сможете это уверенно определить в реальных условиях.
Вадим, может Вам нужно полностью переходить в онлайн?)) делать кучу видео-уроков и зарабатывать на этом? может какие-то платные курсы...
Медленно, но верно я пробую это направление :) Пока видеоблог здесь и Патреон. А дальше видно будет.