Тёмный

Пишу классические методы CSS по-новому 🙌 

Анна Блок
Подписаться 102 тыс.
Просмотров 21 тыс.
50% 1

🔥 Успей воспользоваться кэшбеком 15% на регистрацию, ведь акция совсем скоро закончится!
✅ Переходи по ссылке и вперед в будущее с Aéza.net:
aeza.net/?ref=annblok_webdev
Плейлист с новинками CSS: • Новинки CSS
Больше практики с новинками CSS: boosty.to/annblok
Таймкоды:
00:00 Вступление
00:37 Пример 1 (ч.1)
02:55 Реклама
04:35 Пример 1 (ч.2)
05:38 Пример 2
06:57 Пример 3
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com

Развлечения

Опубликовано:

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 87   
@AlexZHIMuk
@AlexZHIMuk 29 дней назад
Анна, спасибо большое! Как всегда актуалочка (:
@sergeymickolaenko1161
@sergeymickolaenko1161 Месяц назад
Спасибо что поделились таким полезным видео.
@user-nh2vy6rc7z
@user-nh2vy6rc7z Месяц назад
Супер! Спасибо за очень полезное и информативное видео.
@golikroma
@golikroma Месяц назад
Радует то, что ваши объяснения относительно простые и понятные! Можно разобраться и повторить!
@user-dr8yk9vb3g
@user-dr8yk9vb3g Месяц назад
Спасибо за интересное и информативное видео!
@beautifulnature8259
@beautifulnature8259 Месяц назад
Все работает нормально. По полочкам разложили что да как. Удачи в работе😊
@user-xg4ji5vd1r
@user-xg4ji5vd1r Месяц назад
Это интересно, лично я попробую применить, спасибо.
@user-wy4zl9ue4u
@user-wy4zl9ue4u Месяц назад
Спасибо, что поделились новыми методами записями. Всё легко и доступно, попробуем применить на практике.
@oxanaluzenko4709
@oxanaluzenko4709 Месяц назад
Все новое всегда приветствуется. Интересно и полезно
@user-kk3em8vt2d
@user-kk3em8vt2d Месяц назад
Да, теперь стало намного проще, спасибо за информацию
@fbdnfndbdbdb1523
@fbdnfndbdbdb1523 Месяц назад
Вы очень красиво и понятно все рассказываете
@struf1761
@struf1761 Месяц назад
Я тоже так начал писать благодаря тебе, тутор как всегда на высоте
@user-wn9tk3uk5u
@user-wn9tk3uk5u Месяц назад
Спасибо,что поделились такой информацией 👍 было интересно узнать,как Вы пишите классические методы по новому 🔥
@user-bj2hg7kt4q
@user-bj2hg7kt4q Месяц назад
Методы круты и понятны. И за это вам большое спасибо.
@LexiAlexi-xb1ik
@LexiAlexi-xb1ik Месяц назад
Неплохой подход и новые способы текстовых команд
@user-uk3xg6cg3g
@user-uk3xg6cg3g Месяц назад
Вас смотреть не только интересно но еще и полезно
@farmlingarchontas2216
@farmlingarchontas2216 Месяц назад
Топ обзор. Хорошее внимание к деталям. Мне очень понравилось. Лайк.
@user-sf2xu4lb2k
@user-sf2xu4lb2k Месяц назад
Сейчас мы напишем меньше кода... убираем "margin: 0 auto;" и пишем "margin-inline: auto;". У меня вопрос - зачем? Раньше было проще и меньше... margin-inline мало того, что в два раза длиннее, так ещё и может не во всех браузерах работать.
@dembelsky
@dembelsky Месяц назад
Простое и доступное объяснение! В целом всё понятно!
@KindSanya
@KindSanya Месяц назад
Новый метод довольно таки интересный, обязательно ним воспользуюсь, так как до вашего видео я не знал о таком принципе
@b.abdurashidov4863
@b.abdurashidov4863 20 дней назад
Все работает нормально спс
@user-ty4jh6kf6k
@user-ty4jh6kf6k Месяц назад
Было очень интересно посмотреть данное видео узнала много новой информации о данном продукте.
@user-lt7ov6us6f
@user-lt7ov6us6f Месяц назад
Очень интересный метод, нужно и себе так попробовать
@user-io6sw2ov9l
@user-io6sw2ov9l Месяц назад
width c min - красота, мне такая запись очень нравится
@olegakchurin1219
@olegakchurin1219 25 дней назад
Like за рекламу. Очень классно прорекламировала 🔥🔥🔥 P.S Материал как всегда на высоте. Подача рекламы реально заинтересовало)
@alexschaus1909
@alexschaus1909 Месяц назад
Спасибо за очень интересный и хороший обзор просмотрел и прослушал с интересом.
@KidsPlanetOfficialChannel
@KidsPlanetOfficialChannel Месяц назад
Благодарю! Ваш метод мне понравился больше, так как мой способ написания CSS немного устаревший. Возьму на заметку так сказать.
@MrRomagromov
@MrRomagromov Месяц назад
Извините, но на хронометраже 2:30 какая-то дичь, про то, что css не влияет на скорость загрузки, а влияет сервер. Косвенно - да. Но с учетом малого размера css файлов, не особо. Тут скорее дело в скорости соединения. Но неужели автору канала неизвестно, что dom и css стили рендерит браузер!!! И время загрузки страницы, не считая скорости соединения полностью зависят от мощности устройства и сложности css. Возьмите два компьютера, один старый, один новый. И откройте на них страницу. Вы увидите, что с одного и того же сервера, с одинаковой скоростью соединения, на старой тачке все грузится в разы дольше. Дальше больше. Если вы насытите свой css файл градиентами - старый компьютер будет захлебываться. Потому что рендер градиентов ресурсоемкая задача. И последнее. CSS - это статика. И абсолютно до лампочки какой мощности у вас сервер.
@rodigy
@rodigy 27 дней назад
Подводка к рекламе, остальное уже не важно видимо.
@BDfyfGfhdjkw
@BDfyfGfhdjkw Месяц назад
Да такие методы нужно использовать
@funtik1991
@funtik1991 25 дней назад
Ви успешно достучались до аудитории верстальщиков-динозавров😀
@sashabest1479
@sashabest1479 Месяц назад
Нужно будет протестировать данный способ на практике, как знать, возможно данный пример будет как базовый.
@alexzom.
@alexzom. Месяц назад
в тему информативное видео и было интересно смотреть
@user-ii1zz7lq5x
@user-ii1zz7lq5x 28 дней назад
Подскажите а как с точкой производительности, ведь каждое вычисление и использование калькулятора дает нагрузку на проц
@Mylife-hl6ph
@Mylife-hl6ph Месяц назад
В любой программе можно найти новые варианты написания
@imperror555
@imperror555 Месяц назад
hover: hover - сработает на мобильном хроме, он в это умеет, здесь нужна медиа квери max-width
@StonHenge
@StonHenge Месяц назад
Одно не могу понять. Если есть допустим макет с 3 разрешениями (мобилка, планшет, и десктоп) и везде разный шрифт у заголовка. То как с помощью clamp() выставить 3 размера, при этом чтобы по Pixel Perfect все 3 размера заголовка на разных разрешениях идеально совпадали? Допустим 20px, 25px и 50px ? А разрешения 320px, 768px, 1200px. ?
@WERWOLION
@WERWOLION Месяц назад
Pixel Perfect это про другое у тебя в Pixel Perfect , если клиент совсем тупой баран то ты на медиа 550-570 бъешь цифру из макета т.к ты соблюдаешь только цифры по макету и тогда диз должен тебе рисовать версии для 100 видов размеров экранов Исли РР не попадет в clamp то это 300% ошибка диза и ты можешь указать это сразу в момент взятия заказа.
@WERWOLION
@WERWOLION Месяц назад
Так же для попадаения в макет на sass использую спец миксины и могу попасть на нужное в макете разрешение
@UnRealbl4
@UnRealbl4 Месяц назад
Задать два раза clamp. Один от 320 до 768, второй в медиавыражение переопределить значение которое соответствуют ширине 768-1200.
@user-ek1sz6ie4k
@user-ek1sz6ie4k Месяц назад
На перший погляд все здається легко і просто. Побачимо як буде на практиці.
@kopchik1000
@kopchik1000 Месяц назад
Половину не понял но надеюсь со временем разберусь , что там и как.
@user-hs7im8su7g
@user-hs7im8su7g Месяц назад
Я много знаю что классические методы можно многими способами писать. Вы дали еще проще тему. спасибо.
@user-ct2dv3vr1n
@user-ct2dv3vr1n Месяц назад
Главное сделать в этой области первый шаг.
@BugzzV
@BugzzV Месяц назад
многие зрители абсолютно не разбираются в программировании и вообще далеки от этого
@LostInspector
@LostInspector Месяц назад
Javascript очень тесно завязан на HTML и CSS, и поэтому хорошо зная эти два языка, намного проще будет изучать Javascript
@4499664
@4499664 Месяц назад
но есть нюанс. при беглом взгляде на первоначальную запись, мне хватит 2-3 секунды чтобы понять, что там происходит. при использовании новых методов, это время увеличится кратно. понимаю, что видео не об этом, но всё же.
@KeinStyle
@KeinStyle 25 дней назад
А что с поддержкой в браузерах?
@igorzubkov3877
@igorzubkov3877 Месяц назад
Кто знает название ресурса, для расчета clamp тот что в видео?
@tolasnisar2494
@tolasnisar2494 Месяц назад
Привычка это конечно хорошо но нужно и что-то новое пробовать.
@WERWOLION
@WERWOLION Месяц назад
Мне сегодня задание просят с поддержкой Интернет Эксплоера. А вы тут за новые методы. Я конечно сказал что ок. У браузера нет поддержки и по этому работа за 100$ будет стоить 1000$ , за пол года сделаю что угодно.
@WERWOLION
@WERWOLION Месяц назад
Так же функция min будет тормозить браузер. Поэтому макс видз лучше по нагрузке. Это касается всех css функций. Кальк и пр. Если их напихать много то будет больно.
@WERWOLION
@WERWOLION Месяц назад
Вы используете локальные переменные. А локальные переменные на западном сообществе уже используют другой нейминг --_name Если вы не используете префикс _ то это плохая практика. Нужно разграничить видимость переменной если это можно сделать через нейминг
@WERWOLION
@WERWOLION Месяц назад
У занков >< в медиа запросах отвратительная поддержка, и их можно будет использовать только в 2030 году, намного лучше использовать для этого миксины sass. Тем более что в медиа миксинах можно указывать точку стоп.
@virtuoz-ru
@virtuoz-ru Месяц назад
@@WERWOLION Ты уже отстал. Практически только что утвердили новую запись переменных: --_--name
@WERWOLION
@WERWOLION Месяц назад
@@virtuoz-ru я чекнул, они обновили --_--_--_-------___name
@PearlDpUa
@PearlDpUa Месяц назад
6:40 таким калькулятором не користувалася точно, все на вскидку робиться або на прикладі інших шаблонів
@filimon7997
@filimon7997 29 дней назад
Дайте пожалуйста ссылку на тот онлайн калькулятор для clamp(a)
@filimon7997
@filimon7997 23 дня назад
Понятно, зимой снега не допросишься :(
@Alex-mi2ij
@Alex-mi2ij Месяц назад
Мне бы научиться пользоваться старыми, а новыми уже потом 🙂
@DanDiablo
@DanDiablo Месяц назад
Какая интересная реклама!
@user-dw2tc4cq9x
@user-dw2tc4cq9x Месяц назад
Видео не для широкой аудитории. Но специалистам оно точно пригодится!
@rodigy
@rodigy 27 дней назад
Специалисты и так знают.
@404Negative
@404Negative Месяц назад
зачем мне аеза, когда есть gcp / aws ??
@Ukrainka8456
@Ukrainka8456 Месяц назад
Вы бы обьясняли так, чтобы было понятно не только избранным...
@user-dn8yk9wq7c
@user-dn8yk9wq7c 21 день назад
Используйте фреймворки
@cooperanderson8651
@cooperanderson8651 Месяц назад
Довольно интересные новшества. Но все запоминать так больно и стоит ли? Можно писать по-старому и не париться.
@user-dh1gs5lj8w
@user-dh1gs5lj8w Месяц назад
Легче работать теми методами, к которым привык.
@user-fn8no3oh1i
@user-fn8no3oh1i Месяц назад
Методы, представленные здесь, тщательно продуманы и разработаны, чтобы быть максимально эффективными и понятными для всех.
@rodigy
@rodigy 27 дней назад
Короче то короче, а вот производительнее ли это вопрос.
@MrGureckij
@MrGureckij Месяц назад
Данная конструкция не только непривычна, но и абсолютно не рабочая. Где вы это всё берёте. Первоисточник в студию. Удаляются внутренние поля, а манипулируете внешними полями. Где тут оптимизация?
@shooddy
@shooddy 29 дней назад
2 минуты из 8 минутного ролика - реклама, что больше равно 25% ролика... А вы и дальше продолжайте ставить лайки и хвалить что всё работает хорошо
@MrRomagromov
@MrRomagromov 22 дня назад
Это накрученные лайки. Посмотрите комменты. Один за другим в одно ghtlkj;tyt и одинаковым смыслом - типа все круто, очень полезноt видео и тд. без конкретики по содержанию. Так школота зарабатывает по пять рублей. Они даже не пишут, что именно круто, потому что не понимают, о чем идет речь,
@NEYTLOL
@NEYTLOL 28 дней назад
Не очень понятный видео
@DaniaSigida
@DaniaSigida Месяц назад
По сути ничего нового..., зря потраченное время..., зачем делать просто когда можно сложно! Всего лишь один вопрос: ЗАЧЕМ???
@SAPIENTIA666
@SAPIENTIA666 Месяц назад
Абсолютно согласен. Зачем усложнять простое? Чтобы что?
@Ruckus1986
@Ruckus1986 Месяц назад
Ухо тоже можно чесать по-разному)
@Ruckus1986
@Ruckus1986 Месяц назад
Попробовал для магазина использовать clamp. Переделывал потом на привычные методы определения. Заголовки ведут себя по разному из-за разницы в количестве символов внутри. Это ужасно выглядит
@SAPIENTIA666
@SAPIENTIA666 Месяц назад
@@Ruckus1986 ну такое. Контент ради контента (со всем уважением к автору)
@Ruckus1986
@Ruckus1986 Месяц назад
@@SAPIENTIA666 не, за контент спасибо. Про новые функции рассказывает и т,д,. Тут больше вопросов к этим изобретателям) когда описание нововведения не может никто понять толком, то такое лучше не использовать))
@dmitryn.4506
@dmitryn.4506 26 дней назад
Какая кошмарная вёрстка и дизайн у спонсора 😰 Сразу не вызывает доверия, даже регистрироваться неохота 😅 Выглядит как поделка детсадовцев 🤪 Простите уж за токсичность 😁 Нет слов одни эмоции 😅 Ну, ладно-ладно! Дно не пробито. Местами всё норм, но прямо очевидные косяки из всех щелей. Может, конечно, "я дизайнер - я так вижу" работает, но я так не вижу, сорян 😅 Цены на домены далеко от своих доменов и близко к другим доменам стоят в таблице, разъехавшееся по вертикали, ужасно смотрящееся окно регистрации, нелепо слипшиеся поля для регистрации и кнопка, зачем-то нерабочий крестик для закрытия, а ещё и инструкции по якобы взлому сервиса в консоли висят (шта? зачем?), и многое другое... (чтобы не голословно) Надеюсь не сильно художников обидел 😊 Сорян, если что...
@lesters
@lesters 22 дня назад
марджин инлайн, сомнительная херня, которая не работает в браузерах до 20 года
Далее
skibidi toilet 74
07:02
Просмотров 19 млн
МЯСНОЙ ЦЕХ - Страшилки Minecraft
37:24
23 CSS features you should know (and be using) by now
31:31
Заметили?
0:11
Просмотров 2,4 млн