Это видео недоступно.
Сожалеем об этом.
Пишу классические методы CSS по-новому 🙌
HTML-код
- Опубликовано: 6 авг 2024
- 🔥 Успей воспользоваться кэшбеком 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
Анна, спасибо большое! Как всегда актуалочка (:
Все работает нормально. По полочкам разложили что да как. Удачи в работе😊
Радует то, что ваши объяснения относительно простые и понятные! Можно разобраться и повторить!
Супер! Спасибо за очень полезное и информативное видео.
Спасибо что поделились таким полезным видео.
Спасибо, что поделились новыми методами записями. Всё легко и доступно, попробуем применить на практике.
Это интересно, лично я попробую применить, спасибо.
Спасибо за интересное и информативное видео!
Спасибо,что поделились такой информацией 👍 было интересно узнать,как Вы пишите классические методы по новому 🔥
Извините, но на хронометраже 2:30 какая-то дичь, про то, что css не влияет на скорость загрузки, а влияет сервер. Косвенно - да. Но с учетом малого размера css файлов, не особо. Тут скорее дело в скорости соединения.
Но неужели автору канала неизвестно, что dom и css стили рендерит браузер!!! И время загрузки страницы, не считая скорости соединения полностью зависят от мощности устройства и сложности css.
Возьмите два компьютера, один старый, один новый. И откройте на них страницу. Вы увидите, что с одного и того же сервера, с одинаковой скоростью соединения, на старой тачке все грузится в разы дольше.
Дальше больше. Если вы насытите свой css файл градиентами - старый компьютер будет захлебываться. Потому что рендер градиентов ресурсоемкая задача.
И последнее. CSS - это статика. И абсолютно до лампочки какой мощности у вас сервер.
Подводка к рекламе, остальное уже не важно видимо.
Все новое всегда приветствуется. Интересно и полезно
Все работает нормально спс
Да, теперь стало намного проще, спасибо за информацию
Я тоже так начал писать благодаря тебе, тутор как всегда на высоте
Благодарю! Ваш метод мне понравился больше, так как мой способ написания CSS немного устаревший. Возьму на заметку так сказать.
Методы круты и понятны. И за это вам большое спасибо.
Неплохой подход и новые способы текстовых команд
Топ обзор. Хорошее внимание к деталям. Мне очень понравилось. Лайк.
Новый метод довольно таки интересный, обязательно ним воспользуюсь, так как до вашего видео я не знал о таком принципе
Было очень интересно посмотреть данное видео узнала много новой информации о данном продукте.
Простое и доступное объяснение! В целом всё понятно!
width c min - красота, мне такая запись очень нравится
Вас смотреть не только интересно но еще и полезно
Очень интересный метод, нужно и себе так попробовать
Спасибо за очень интересный и хороший обзор просмотрел и прослушал с интересом.
Сейчас мы напишем меньше кода... убираем "margin: 0 auto;" и пишем "margin-inline: auto;". У меня вопрос - зачем? Раньше было проще и меньше... margin-inline мало того, что в два раза длиннее, так ещё и может не во всех браузерах работать.
Like за рекламу. Очень классно прорекламировала 🔥🔥🔥
P.S Материал как всегда на высоте. Подача рекламы реально заинтересовало)
в тему информативное видео и было интересно смотреть
Подскажите а как с точкой производительности, ведь каждое вычисление и использование калькулятора дает нагрузку на проц
Кто знает название ресурса, для расчета clamp тот что в видео?
Да такие методы нужно использовать
Нужно будет протестировать данный способ на практике, как знать, возможно данный пример будет как базовый.
Ви успешно достучались до аудитории верстальщиков-динозавров😀
А что с поддержкой в браузерах?
Одно не могу понять. Если есть допустим макет с 3 разрешениями (мобилка, планшет, и десктоп) и везде разный шрифт у заголовка. То как с помощью clamp() выставить 3 размера, при этом чтобы по Pixel Perfect все 3 размера заголовка на разных разрешениях идеально совпадали? Допустим 20px, 25px и 50px ? А разрешения 320px, 768px, 1200px. ?
Pixel Perfect это про другое
у тебя в Pixel Perfect , если клиент совсем тупой баран то ты на медиа 550-570 бъешь цифру из макета т.к ты соблюдаешь только цифры по макету
и тогда диз должен тебе рисовать версии для 100 видов размеров экранов
Исли РР не попадет в clamp то это 300% ошибка диза и ты можешь указать это сразу в момент взятия заказа.
Так же для попадаения в макет на sass использую спец миксины и могу попасть на нужное в макете разрешение
Задать два раза clamp. Один от 320 до 768, второй в медиавыражение переопределить значение которое соответствуют ширине 768-1200.
На перший погляд все здається легко і просто. Побачимо як буде на практиці.
hover: hover - сработает на мобильном хроме, он в это умеет, здесь нужна медиа квери max-width
Половину не понял но надеюсь со временем разберусь , что там и как.
6:40 таким калькулятором не користувалася точно, все на вскидку робиться або на прикладі інших шаблонів
Я много знаю что классические методы можно многими способами писать. Вы дали еще проще тему. спасибо.
Главное сделать в этой области первый шаг.
В любой программе можно найти новые варианты написания
Дайте пожалуйста ссылку на тот онлайн калькулятор для clamp(a)
Понятно, зимой снега не допросишься :(
Мне бы научиться пользоваться старыми, а новыми уже потом 🙂
Привычка это конечно хорошо но нужно и что-то новое пробовать.
Вы очень красиво и понятно все рассказываете
но есть нюанс. при беглом взгляде на первоначальную запись, мне хватит 2-3 секунды чтобы понять, что там происходит. при использовании новых методов, это время увеличится кратно. понимаю, что видео не об этом, но всё же.
Javascript очень тесно завязан на HTML и CSS, и поэтому хорошо зная эти два языка, намного проще будет изучать Javascript
зачем мне аеза, когда есть gcp / aws ??
Люблю тебя!!
Какая интересная реклама!
Используйте фреймворки
Мне сегодня задание просят с поддержкой Интернет Эксплоера.
А вы тут за новые методы.
Я конечно сказал что ок. У браузера нет поддержки и по этому работа за 100$ будет стоить 1000$ , за пол года сделаю что угодно.
Так же функция min будет тормозить браузер.
Поэтому макс видз лучше по нагрузке.
Это касается всех css функций. Кальк и пр. Если их напихать много то будет больно.
Вы используете локальные переменные.
А локальные переменные на западном сообществе уже используют другой нейминг
--_name
Если вы не используете префикс _ то это плохая практика.
Нужно разграничить видимость переменной если это можно сделать через нейминг
У занков >< в медиа запросах отвратительная поддержка, и их можно будет использовать только в 2030 году, намного лучше использовать для этого миксины sass.
Тем более что в медиа миксинах можно указывать точку стоп.
@@WERWOLION Ты уже отстал. Практически только что утвердили новую запись переменных: --_--name
@@виртуоз_ру я чекнул, они обновили --_--_--_-------___name
нельзя объяснить последний пример ?
многие зрители абсолютно не разбираются в программировании и вообще далеки от этого
Видео не для широкой аудитории. Но специалистам оно точно пригодится!
Специалисты и так знают.
Довольно интересные новшества. Но все запоминать так больно и стоит ли? Можно писать по-старому и не париться.
Вы бы обьясняли так, чтобы было понятно не только избранным...
Легче работать теми методами, к которым привык.
Данная конструкция не только непривычна, но и абсолютно не рабочая. Где вы это всё берёте. Первоисточник в студию.
Удаляются внутренние поля, а манипулируете внешними полями. Где тут оптимизация?
Короче то короче, а вот производительнее ли это вопрос.
Методы, представленные здесь, тщательно продуманы и разработаны, чтобы быть максимально эффективными и понятными для всех.
2 минуты из 8 минутного ролика - реклама, что больше равно 25% ролика...
А вы и дальше продолжайте ставить лайки и хвалить что всё работает хорошо
Это накрученные лайки. Посмотрите комменты. Один за другим в одно ghtlkj;tyt и одинаковым смыслом - типа все круто, очень полезноt видео и тд. без конкретики по содержанию. Так школота зарабатывает по пять рублей. Они даже не пишут, что именно круто, потому что не понимают, о чем идет речь,
По сути ничего нового..., зря потраченное время..., зачем делать просто когда можно сложно! Всего лишь один вопрос: ЗАЧЕМ???
Абсолютно согласен. Зачем усложнять простое? Чтобы что?
Ухо тоже можно чесать по-разному)
Попробовал для магазина использовать clamp. Переделывал потом на привычные методы определения. Заголовки ведут себя по разному из-за разницы в количестве символов внутри. Это ужасно выглядит
@@Ruckus1986 ну такое. Контент ради контента (со всем уважением к автору)
@@SAPIENTIA666 не, за контент спасибо. Про новые функции рассказывает и т,д,. Тут больше вопросов к этим изобретателям) когда описание нововведения не может никто понять толком, то такое лучше не использовать))
Какая кошмарная вёрстка и дизайн у спонсора 😰
Сразу не вызывает доверия, даже регистрироваться неохота 😅 Выглядит как поделка детсадовцев 🤪
Простите уж за токсичность 😁 Нет слов одни эмоции 😅
Ну, ладно-ладно! Дно не пробито. Местами всё норм, но прямо очевидные косяки из всех щелей. Может, конечно, "я дизайнер - я так вижу" работает, но я так не вижу, сорян 😅
Цены на домены далеко от своих доменов и близко к другим доменам стоят в таблице, разъехавшееся по вертикали, ужасно смотрящееся окно регистрации, нелепо слипшиеся поля для регистрации и кнопка, зачем-то нерабочий крестик для закрытия, а ещё и инструкции по якобы взлому сервиса в консоли висят (шта? зачем?), и многое другое... (чтобы не голословно)
Надеюсь не сильно художников обидел 😊 Сорян, если что...
Э, а ссылка на калькулятор для клэмпа где? Нам самим яндексить? Жесть, Анют, подстава
Всё в тг t.me/frontendblok (по поиску clamp можно найти)
марджин инлайн, сомнительная херня, которая не работает в браузерах до 20 года