Слишком сложно, проще использовать обычные margin'ы и padding'и...да и с ios наверняка что-то да не дружит. Но для общей практики и развития знать про них не помешает. Спасибо за видос)👍
До тех пор пока вы не начнете локализировать ваш сайт для арабского или иврита. Вот там вы намаетесь с right/left. А start/end сам знает откуда у вас начинается текст.
Всё понятно, но за мою практику, если вспомнить всё проекты, проще использовать обычные свойства. Показанные свойства имеет смысл использовать в проектах, где много контента с изменённым направлением, или где можно переключить направление. А в обычных проектах, даже там где единожды или дважды, необходимо изменить направление, то всё равно проще по старинке забацать. Но знать, что такое есть - полезно. П. С Кликбейт детектед 🙃
Это все конечно реально круто, но хотелось бы увидеть как на реальном проекте или хотя бы на реальной верстке лендинговой страницы применялись свойства которые просто бы должны были переворачивать контент. Да это прикольно когда делаешь адаптив для мобилок и надо все сделать в одну линию но проще уже использовать либо гриды, либо row-gap которые подойдут как для флексов так и для гридов. Справедливости ради хочу отметить что margin-inline и padding-inline которые позволяют задавать по горизонтали отступы, а также margin-block и padding-block которые позволяют задавать по вертикали отступы это прикольно но как будто бы это не понятно зачем и вообще нужно, прикольно что есть, а зачем это, не понятно если честно
Этот урок больше расказывает о direction чем о margin/padding))) В целом я использую блок или инлайн в тех случаях, когда не хочу писать два правила (левый+правый или верх+низ) при этом не желаю использовать упрощенный вариант типа padding: 10px 0; когда ранее были установленны другие свойства, которые могут быть перебиты сразу 10px 0; Старт, Енд еще нигде не использовал. Слишком длинные названия, когда есть упрощенные
"Если появится задача". Самая ключевая фраза. Все подобные авторы видео забывают упомянуть, что в реальной практике вы можете годами верстать и не наткнуться на эту задачу, где бы нужно было это применить. Я уже лет 15 верстаю и только однажды это применил на сайте с арабским текстом.
Показанные свойства имеет смысл использовать в проектах, где много контента с изменённым направлением, или где можно переключить направление. посмотрим как это сработает и будет ли эффективно в работе сайта.
Грубо говоря, как я понял, есть смысл это использовать, только если делать какой-нибудь международный сайт со всеми языками, при котором текст будет меняться слева-направо или сверху-вниз
все понятно, но не понятно зачем? В реальных проектах я пока не вижу смыла использовать. Было бы хорошо если был реальный пример, вот на старых стилях было 10 срок кода, с новыми стало 3 строки
@@dimaburichin7726 На CanIuse сказано, что поддержка начинается от 14.5 до 17 версии моб.Safari, что составляет 10% от всего числа пользователей различных типов браузеров. Какие у вас версии были?
Если пишут что поддержка есть(в Сафари его с 14.1 начали поддерживать) это не факт что будет работать как надо и проблема почему то плавающая была на 14 версии он выходит сырой, но 15-16 плавают. 17 пока не было проблем. @@annblok_webdev
Сложность верстки сильно возрастает, да для высоко скилованных верстальщиков, это ок, а программисты, которые редко погружаются в верстку? Они от таких кренделей с ума сойдут) При 95%+ по Can I use можно применять, пока рано.
Зачем? Гораздо нагляднее margin-top: 16px; margin-bottom: 32px; чем margin-block: 16px 32px; Что касается направлений: это сверх редкий кейс использования. Выравнивание гораздо удобнее делать флексами или гридом чем инвертированием направлений
Сделай, пожалуйста, урок, как при помощи CSS сделать закреплённый header и закреплённые один-два столбца в таблице при скроле. Может при помощи grid или flex.
Header - possition: stiky. Либо absolute и добавить основному контенту padding-top: \*header height\*, чтобы контент не залазил под header. Со столбцами то же самое, наверное, можно
Отличный совет: избегай избыточного кода! Никогда не пиши margin, padding и border в CSS, используй компактные стили. Это улучшит читаемость и поддерживаемость кода. Продолжайте делиться лучшими практиками
Когда то думал о может выучить JS и делать сайтики и веб приложения, после хреного туча таких видео, которые в 90% не имеют ни какой аргументации, потому что фронты сами во многом не знают что они делают, так как один говорит да другой говорит нет, чел с какой-то корпы снова говорит да и вас всех не поймешь, случайно наткнулся на это видео, когда хотел понять веб фреймворки изнутри. Зачем зачем вы себе так все усложняйте. Забил хрен, пошел учить с++ и теперь чуствую себя здоровым человеком в embedded.
так, и что? окей, новые свойства. Показала как они работают, а зачем и где они нужны, и почему обязательно нужно их использовать вместо обычных не объяснила.
Сразу видно, когда блогер не работал в верстке толком. Нужно учитывать совместимость со старыми версиями браузеров. Внезапно, такие встречаются не так редко. Чаще чем последние версии айфонов. Поэтому в любом случае придется делать fallback на классические свойства, поддерживаемые везде. Никуда от них не денешься. Хорошим тоном было бы показыавать и разбирать совместимость этих свойств на can i use. А так получается, вы говорите чтобы их не использовали, а на деле их применение ограничено. А потом мы, настоящие верстальщики переделываем за вами вот это всё, чтобы работало у всех.
Пока что сложно. Но уверен, если бы был проект, где новые свойства идеально бы вписались, то понял бы намного быстрее. Для общего развития, видео полезно.
margin и padding используйте. Broder не используйте потому что он двигает верстку и неудобно будет делать подчеркивания и выделения. Вместо border используйте box-shadow.
Слишком сложно, проще использовать обычные margin'ы и padding'и...да и с ios наверняка что-то да не дружит. Но для общей практики и развития знать про них не помешает. Спасибо за видос)👍
В ios все надо дополнительно тестировать, там элементарные стили становятся нелогичными
До тех пор пока вы не начнете локализировать ваш сайт для арабского или иврита. Вот там вы намаетесь с right/left. А start/end сам знает откуда у вас начинается текст.
не знаю как мак но айфон не переворачиват текст воооообще ...
caniuse в помощь
Спасибо! Давно уже про эти свойства знаю, но как-то руки не доходили с ними разобраться, а тут ваше видео
Всё понятно, но за мою практику, если вспомнить всё проекты, проще использовать обычные свойства. Показанные свойства имеет смысл использовать в проектах, где много контента с изменённым направлением, или где можно переключить направление.
А в обычных проектах, даже там где единожды или дважды, необходимо изменить направление, то всё равно проще по старинке забацать.
Но знать, что такое есть - полезно.
П. С
Кликбейт детектед 🙃
Один из вариантов написала в тг - t.me/frontendblok
Но для общего развития, и чтобы не отставать, делая все по-старинке - супер!
А так согласен.
Это все конечно реально круто, но хотелось бы увидеть как на реальном проекте или хотя бы на реальной верстке лендинговой страницы применялись свойства которые просто бы должны были переворачивать контент. Да это прикольно когда делаешь адаптив для мобилок и надо все сделать в одну линию но проще уже использовать либо гриды, либо row-gap которые подойдут как для флексов так и для гридов.
Справедливости ради хочу отметить что margin-inline и padding-inline которые позволяют задавать по горизонтали отступы, а также margin-block и padding-block которые позволяют задавать по вертикали отступы это прикольно но как будто бы это не понятно зачем и вообще нужно, прикольно что есть, а зачем это, не понятно если честно
Анна, спасибо большое за вашу работу и за помощь людям
Спасибо! Уроки стали еще интереснее, так как теперь вообще каждый шаг и значение объясняете!
уроки никогда лишними не бывают даже если они кому то не нравятся
Хорошие примеры. Мне очень понравилось. Достаточно подробно, но не слишком затянуто. Лайк!
Очень полезный ролик и самое главное,актуально !Думаю, что в данный период времени нужная информация.
Отличные свойства!
Буду использовать!
Аня, спасибо за информацию!
😊
Спасибо за подробный обзор, может в будущим и понадобиться эта информация.
Этот урок больше расказывает о direction чем о margin/padding))) В целом я использую блок или инлайн в тех случаях, когда не хочу писать два правила (левый+правый или верх+низ) при этом не желаю использовать упрощенный вариант типа padding: 10px 0; когда ранее были установленны другие свойства, которые могут быть перебиты сразу 10px 0; Старт, Енд еще нигде не использовал. Слишком длинные названия, когда есть упрощенные
У меня такая же фигня )
интересная информация, спасибо за видео, ждем еще)
Видео находка, много полезного для себя услышал. Спасибо за рекомендацию
Большое спасибо за такое информативное видео. Возьму себе на заметку
Анна ты такая умничка, всегда смотрю твои видео, так как сам учусь создавать сайты и мне интересно совмещать твою красоту и знание
Спасибо как раз учу html and css и попались эти свойства когда сайт разбирал.
Для адаптации удобно будет. Спасибо, хороший контент!
"Если появится задача". Самая ключевая фраза. Все подобные авторы видео забывают упомянуть, что в реальной практике вы можете годами верстать и не наткнуться на эту задачу, где бы нужно было это применить. Я уже лет 15 верстаю и только однажды это применил на сайте с арабским текстом.
Авось пригодится это знание. Еще такого не делал и не видел, чтобы кто-то применял.
Мм, интересная инфа. Не знал. Спасибо. С вами разобраться гораздо проще😊
Спасибо Анна! Очень полезная информация! С уважением к Вам Ахмад
Показанные свойства имеет смысл использовать в проектах, где много контента с изменённым направлением, или где можно переключить направление. посмотрим как это сработает и будет ли эффективно в работе сайта.
С примерами очень полезно.👍
Спасибо за информацию. Пока не придумал как бы можно было использовать новые свойства. Если только для упрощения неких визуальных эффектов...
Очень хороший ролик. Интересно было бы поверстать како-то макет, где это все имело бы решающее значение.
Очень полезные и важные советы, спасибо вам большое👍
Буду пробовать на своих проектах спасибо сестра 😊
Грубо говоря, как я понял, есть смысл это использовать, только если делать какой-нибудь международный сайт со всеми языками, при котором текст будет меняться слева-направо или сверху-вниз
Хорошое видео.Очень било интересно.Мне понравилось 💯❤️👍
Я и не знала, теперь никогда не буду писать такое
Давно использую, особенно помогает для LTR/RTL. Никаких доп. стилей не понадобится.
Спасибо большое!
все понятно, но не понятно зачем? В реальных проектах я пока не вижу смыла использовать. Было бы хорошо если был реальный пример, вот на старых стилях было 10 срок кода, с новыми стало 3 строки
Один из вариантов написала в тг - t.me/frontendblok
@@annblok_webdev можно прямую ссылку на пример что ли, нет там, смотрел больше чем за неделю назад
у меня были кейсы когда padding-inline не работал на некоторых IOS устройствах
в каком году это было?
Тоже с таким сталкивался вообще ios походу это новый ишак туда поддержку завозят ну очень долго))
@@dimaburichin7726 На CanIuse сказано, что поддержка начинается от 14.5 до 17 версии моб.Safari, что составляет 10% от всего числа пользователей различных типов браузеров. Какие у вас версии были?
Если пишут что поддержка есть(в Сафари его с 14.1 начали поддерживать) это не факт что будет работать как надо и проблема почему то плавающая была на 14 версии он выходит сырой, но 15-16 плавают. 17 пока не было проблем. @@annblok_webdev
@@annblok_webdev это было 1 месяц назад, устройство iphone 11 или 12
У вас есть курсы, а вот изменения или какие новшества в них добавляются?
Я то понимаю что курсы были созданы достаточно давно!
Вносятся. В ближайшем потоке добавится ещё больше информации о новых свойствах CSS.
Сложность верстки сильно возрастает, да для высоко скилованных верстальщиков, это ок, а программисты, которые редко погружаются в верстку? Они от таких кренделей с ума сойдут)
При 95%+ по Can I use можно применять, пока рано.
Теперь все будут искать этого космонавта))
Зачем? Гораздо нагляднее margin-top: 16px; margin-bottom: 32px; чем margin-block: 16px 32px; Что касается направлений: это сверх редкий кейс использования. Выравнивание гораздо удобнее делать флексами или гридом чем инвертированием направлений
Интересные моменты. Вот бы ещё селекты, чекбосы и радио нормально подружили с css
В одном из проектов делал вертикальное расположение текста
Столько всяких правил. Прям сходу и не запомнить их все. Нужно тренироваться.
Ща на собесах будут козырить собесудющего, типа: А чем отличается writing-mod и direction или же как по другому записать margin?
Спасибо!
Сделай, пожалуйста, урок, как при помощи CSS сделать закреплённый header и закреплённые один-два столбца в таблице при скроле. Может при помощи grid или flex.
Header - possition: stiky. Либо absolute и добавить основному контенту padding-top: \*header height\*, чтобы контент не залазил под header. Со столбцами то же самое, наверное, можно
Кто нибудь проверял влияние на производительность? Иначе смысл? Сократить объём css? Ну там минимальное сокращение. Спасибо
Это наверняка скажется на производительности крупных мультиязычных сайтов
Если я начну учить арабский язык, то и эти штуки будут полезны )))
Очень-очень интересно, но ни фига не понятно...
Практический смысл описала в тг - t.me/frontendblok
никогда не используйте фронтенд, используйте только бекэнд
Это линзы, фильтр или свои глаза такие?
Сделай еженедельные новости для фронтов: драфты, эвенты, релизы, конференции... Может если есть такое, киньте ссылку pls.
Отличный совет: избегай избыточного кода! Никогда не пиши margin, padding и border в CSS, используй компактные стили. Это улучшит читаемость и поддерживаемость кода. Продолжайте делиться лучшими практиками
Что такое компактные стили?
в смысле не использовать маргин и паддинг?
Подписался🔥👉 и поставил лайк
Когда то думал о может выучить JS и делать сайтики и веб приложения, после хреного туча таких видео, которые в 90% не имеют ни какой аргументации, потому что фронты сами во многом не знают что они делают, так как один говорит да другой говорит нет, чел с какой-то корпы снова говорит да и вас всех не поймешь, случайно наткнулся на это видео, когда хотел понять веб фреймворки изнутри. Зачем зачем вы себе так все усложняйте. Забил хрен, пошел учить с++ и теперь чуствую себя здоровым человеком в embedded.
будем со временем юзать)
но зачем такие сложности!?
головушка и так пухнет от элементарных весчей!
А что в элементарных сложного?
не просто создать свой сайт я уже в этом убедился)
когда надо будет про них и не вспомнишь
Интересно, но лучше писать в наиболее общепринятой манере, не путать людей
так, и что? окей, новые свойства. Показала как они работают, а зачем и где они нужны, и почему обязательно нужно их использовать вместо обычных не объяснила.
Сразу видно, когда блогер не работал в верстке толком. Нужно учитывать совместимость со старыми версиями браузеров. Внезапно, такие встречаются не так редко. Чаще чем последние версии айфонов. Поэтому в любом случае придется делать fallback на классические свойства, поддерживаемые везде. Никуда от них не денешься.
Хорошим тоном было бы показыавать и разбирать совместимость этих свойств на can i use. А так получается, вы говорите чтобы их не использовали, а на деле их применение ограничено. А потом мы, настоящие верстальщики переделываем за вами вот это всё, чтобы работало у всех.
Пока что сложно. Но уверен, если бы был проект, где новые свойства идеально бы вписались, то понял бы намного быстрее. Для общего развития, видео полезно.
А как Андрюша поживает?
очень интересная каша ))
Бедные верстальщики 😢
Какая же Анна красивая ❤
Думаю это не единственный плюс данного видео))
Хорошо, не буду.😊
😻
margin и padding используйте. Broder не используйте потому что он двигает верстку и неудобно будет делать подчеркивания и выделения. Вместо border используйте box-shadow.
Ох уж эти кликбейты😐
Я уже давно margin, padding и border не использую
@@yurok1991 на бэк перешёл?)
@@ylsv работаю в компании, где юзают современные стандарты
ждем на онлике
Позиционирование элементов пэдинагами и марджинами в пикселях в конце 23го года 😂, понимаю понимаю
Для демо-примера это нормально
@@yurok1991 ну да ну да, по этому она говорит что марджин лефт и марджин райт центрирование используется на всех сайтах :D
Совершенно не возможно смотреть видео не то, что на смартфоне, даже на планшете или малом ноутбуке. Фу.
ничего не понятно))
rotate какой-то
короче грубо говоря бесполезные свойста верните элемент как было в хтмл 3 и дайте отдохнуть бедным верстальщикам!!
Бесполезными их точно не назвать, скорее, они дают больше возможностей
Не только арабская письменность справа налево. Еще иврит, урду, синдхи
Загружаем сайт двумя строчками, вы серьёзно?
Хрень какая-то 🙂
Обязательно не буду писать, мне же нечем заняться