Эта новинка в CSS смогла заменить JavaScript

Подписаться 102 тыс.

Просмотров 77 тыс.

50% 1

🔥 23 января (далее 13 марта) стартует обучение по базовой и продвинутой по верстке и JavaScript ❤️ Скидка 10% за заявку 👉 forms.gle/Q5uKoU9HCX3Tmg6g6
Наш сайт с обучениям - frontendblok.com/
Теперь JavaScript не нужен! Так ли это? Ну, как минимум, чтобы сделать таймер, в котором идёт отсчет с 0 до 100 - точно. Да, можно поработать с анимацией, но основная магия происходит из-за @property. Если не знаете, что это, то обязательно посмотрите это видео.
Демо - codepen.io/anna_blok/pen/GRBMQWr
Таймкоды:
00:00 Вступление
01:16 Задачки по JS
01:32 Скидка 10% на обучение
03:10 Делаем текст по центру
04:48 Устанавливаем счетчик
05:46 Задаём анимацию
07:50 Настраиваем переменную c @property
09:14 Заключение
Получать доступ к новым роликам раньше всех можно на Boosty - boosty.to/annblok
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
#css #javascript #frontend

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

11 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 268

@annblok_webdev Год назад

Получать доступ к новым роликам раньше всех можно на Boosty - boosty.to/annblok

@angelsave Год назад

Спасибо за видео! Есть вопрос: а как быть с мобильными устройствами? Например кастомные переменные не работают в safari на iPhone.

@adwers6427 Год назад

Спасибо, Анна за твое упорство и последовательность в создании контента!

@EugenySubbotin Год назад

супер! спасибо! жду более подробное видео про все вариации!

@AveWoff Год назад

Большое спасибо за эти примеры ❤

@medeymarsik6566 Год назад

Толково всё объясняете, спасибо, благодаря вам узнал новое для себя!

@sergeymickolaenko1161 Год назад

Как вы толково всё объясняете, спасибо, благодаря вам узнал новое для себя!

@michaelkamko Год назад

Сразу лайк не глядя! Спасибо огромное!! Жги еще))

@mybestislands8646 Год назад

Вы весьма успешно заполняете мои лакуны в образовании и Вас приятно видеть и слышать . Спасибо и лайк .

@JeanaUchiha Год назад

Как все легко и просто, спасибо за подробное объяснение

@DimaAni Год назад

Вот такие мини уроки я люблю )))

@user-bf5uz7qg3n Год назад

благодарю, вы помогли еще лучше разобраться в CSS

@xusniddinraximov9799 Год назад

Спасибо, Анна за твое упорство и последовательность в создании контента

@sergeyplotnikov4303 Год назад

Очень интересная информация. Спасибо!

@alexeydeveloper9072 Год назад

С каждым видео ты всё красивее и приятней! Спасиб)

@tolasnisar2494 Год назад

Спасибо что рассказали, было бы не плохо узнать подробные.

@user-xc2yu7ib3r Год назад

Подскажите пожалуйста, как функцией javascript заменить css файл?

@user-yr9lq3vh2s Год назад

Интересное видео! Спасибо большое за информацию

@user-ie2ci1cl3c 9 месяцев назад

Добрый день. А почему ноль не отображается? Как сделать, чтобы он тоже был?

@user-oo1dn8gv7y Год назад

Понятно и просто всё объяснили , видео получилось информативным и полезным.

@user-in5tf1ol5d Год назад

Здравствуйте, можете подсказать что почитать-посмотреть для создания страницы-приложения для отслеживания параметров какого либо промышленного оборудования?

@sk89061 Год назад

слишком общий вопрос. зачем? какой текущий уровень/навыки?

@user-ti9ev4nw2k Год назад

Анна Блок сбыла мою мечту с гитарой) так держать! Не перестаю удивляться.

@mirandaflaris4785 Год назад

Спасибо за отличное видео , было очень интересно посмотреть

@deko4132 Год назад

Было бы здорово в конце видео говорить о том, где это в данный момент поддерживается

@liverd Год назад

Добрый день, а где этот счётчик можно применить, он работает сам по себе, зачем такой счётчик?

@dmitryn.4506 Год назад

Очень прикольная фишка! 🔥👍 Но всё равно на практике на JS буду делать 😅

@user-dp9qj4ko9n Год назад

довольно интересный ролик получился . Спасибо за видео

@armag9979 Год назад

Красиво, но с JS удобнее) Это эффектно, но не эффективно

@sanji1253 Год назад

Написать одну простенькую функцию на весь проект будет проще, чем каждый раз мучаться с этим, добавляя лишний вес

@losmalenkiy903 Год назад

отличное видео получилось, посмотрела с большим удовольствием. с меня лайк)))

@tilted_depressed Год назад

Только как ты потом action завяжешь на окончании счётчика

@s1ntun956 Год назад

Что делать, ввёл правильный путь к папке style.css и ошибок нигде нету, а изменения от css не добавляются?

@annblok_webdev Год назад

А инспектор файл видит?

@user-ve7tx3ud6n Год назад

Спасибо Анна.

@crazyshow4209 Год назад

не понимаю только где это можно использовать и зачем оно.

@Ilya-gv6kb Год назад

Спасибо 🙂👍🔥

@QwDragon Год назад

Использование @property и counter прикольное - мне понравилось. Хотя, я подобный счётчик могу без counter сделать, и даже без css-переменных. 4:08 Решение тащить reset/normalize вместо написания одной строчки margin: 0 - спорное. Я вообще противник притаскивания таких штук потому что потом всё равно переопределять придётся. 9:00 Так записать animation-iteration-count - это косяк потому что строчкой выше infinite - это он же. Можно было бы просто удалить (там по умолчанию 1) или заменить на 1.

@thomasshadows2797 Год назад

Про нормалайз согласен. Нечего тащить то, что укладывается в пару строчек, так как есть вероятность недоступа к данному cdn (закрытая сеть). Про infinite и animation-iteration-count все правильно было показано, чтобы было более нагляднее (переопределение по иерархии)

@progerlife6690 Год назад

Офигеть!!!Я в шоке!! Спасибо.. Думал что без js - не обойтись... Век живи век учись! Спасибо еще раз

@imgod113 Год назад

не обойтись

@dashazar4461 Год назад

Крутое, полезное и интересное видео!

@user-wl7cv7ey2m Год назад

не не Js не нужен. Можно web application на CSS делать. И серверную часть кода тоже на CSS.

@yupvysotskyi6264 Год назад

чтото пока я не могу понять - а зачем делать с css скриптовый язык 🤔

@movsesharutyunyan1100 Год назад

Пожалуйста подскажите мне как реализовать запроси на сервере с помощью CSS и обработка данных😂😂😉😊 спасиб било очень интересно изучить CSS более глубоко и советую выбрать более подходящий название для ролика. Спасибо ещё раз 🍾🥂💋😉😊

@user-xj6ur2ei9k Год назад

Хорошо, когда о таких ярких новинках рассказывает приятная и очень умная девушка!

@andriiprok8080 Год назад

чтобы анимация была конечной можно вместо "infinite" выбрать "forwards"

@tsprog4284 Год назад

Ну по идее также ничего не мешает использовать псевдоэлементы с content и тот же @keyframes

@PearlDpUa Год назад

На всех версиях браузеров будет работать без проблем?

@annblok_webdev Год назад

Пока поддержка 70% caniuse.com/?search=%40property

@user-od9ft9sc6q Год назад

Анна умничка )

@Alex_Presli Год назад

Спасибо за такой разбор! Никогда не любил JavaScript, а тут так доходчиво всё девушка объяснила!

@rubenghambaryan Год назад

Не учи web если не нравится JavaScript

@sergeyterekhin3685 Год назад

Не работает в FireFox, а так же на код-пэне и кодли ... в хроме пашет, что говорит о плохой поддержке

@derek233223 Год назад

IE поддерживает? Если да то используем.

@kopchik1000 Год назад

Вау😊 какая милая да еще умная девушка. За совет отдельное спасибо и лайк. Удачи Анна🖐💯

@qualitytransportation Год назад

Заменит конечно же!!! Только в одном случае из миллиона. А дальше придется всё-таки сесть и начать изучать язык программирования, а не стилизации))

@ilunya_kozyr Год назад

Прикольно что я теперь это буду знать, но ещё я понял что мне это не нужно так как есть JS

@mclotos Год назад

а почему webpack а не vite? =(

@svetogor777 Год назад

Конечно все это очень здорова выглядит... Но проще это написать на JS... Спасибо большое за чудесные видеоролики!!

@user-ow2hr5xk8t Год назад

аналогичный комментарий хотел написать) Охренею если такое в верстке увижу)))

@user-ow2hr5xk8t Год назад

Но для общего понимания, полезный контент) Спасибо автору.

@PAGARbon Год назад

еще бы понять что именно здесь "новинка"...

@Krylowandrey Год назад

А какая у вас среда разработки на видео?

@annblok_webdev Год назад

Это не IDE, а сайт Codepen

@user-wf6ue9wp8c Год назад

не хватает подводки - теоретической вводной по новому функционалу. Т.е. выглядит это так - добавилось property, пишем вот так и получаем вот это.

@user-olena_shatun Год назад

Информация будет очень полезной для тех, кто стартует в этом направлении. Очень доступно и понятно, главное не затянуто

@snippet_dev8079 Год назад

Накинь De-esser на звуковую дорожку, чтобы шипящие так сильно не били по ушам

@ulianaeln2259 Год назад

Какая граммотная девушка, смотрю и восхищаюсь.

@svhanz Год назад

О! Моя любовь очередную годноту запилила! Спасибо, посмотрел с интересом.. пысы: Выглядишь обалденно! пысы_2: Майка огонь!

@larenes Год назад

кринж

@yadreyy Год назад

Бл, ну ты и озабоченный. Под видосом о css рога выставляешь

@XAH30 Год назад

К монго из css еще нельзя подключаться? А то мало ли:)

@user-xh9iz3uw6j Год назад

Поверхностное решение. Вы не учли возможности каунтера при сбросе метода, когда функция начинает поиск последовательности в асинхронном режиме, работает нестабильно в реестре react. При этом необходимо допиливать код и устанавливать новые библиотеки, которые так себе работают при асинхронном дублировании двоичного кода в нашем измерении. (Думаю вы поняли что я не программист, просто захотелось включить шаристого и написать кучу умных слов =) )

@P4P4_C4RL0 Год назад

Прикольно, но подача медленная как будто, лучше будет если по-бодрее)

@VeloVetal Год назад

и зачем мне бегающие числа на сайте? PS: цифра -- это одиночный символ в числе, как буква в слове.

@user-zj5jj4uf9y Год назад

а я ничего не понял counter-reset: ms var(--number); - что такое ms? Имя переменной или что-то другое - var это объявление переменной? - --number это тип переменной или как раз её имя? content: counter(ms); - что такое counter?

@annblok_webdev Год назад

ms - в этом месте можете любую другую переменную указать, главное чтобы она дублировалась в свойстве counter-reset и content - var да, переменные в CSS - да, название переменной

@alexeiweb6971 Год назад

Пока не понял, как это использовать

@mclotos Год назад

да, лет 10 назад тоже впринципе можно было заменить некоторые возможности js, используя только css, но сейчас конечно стало проще

@user-ct2dv3vr1n Год назад

Можно было и десять лет назад все это сделать. Но похоже не хватило ума или средств, а может кто то запретил.

@mclotos Год назад

@@user-ct2dv3vr1n а может просто возможности css действительно были ограничены на тот момент. вспомнить хотя бы тот же ie. Это же был пи**ец. Мы всегда писали 2 отдельных css - один для нормальных браузеров, а второй для IE, потому что для него например градиенты и тени надо было задавать картинками. А он как бы и так был не самым быстрым, а со всеми этими картинками вообще сдыхал

@user-ti8pi8oj2e Год назад

Молодец! Умница! Красавица! Видно, что человек РАБОТАЕТ над контентом. Спасибо!

@II-hs9qm Год назад

Большое спасибо, Вы помогли мне лучше разобраться в новинке, CSS, Это расширило мой кругозор!!!

@Savina540 Год назад

Лайк за обложку

@nikolaydd6219 4 месяца назад

Я бы на JS сделал, так на много понятней в коде.

@mr.jivchik2432 Год назад

Круто! Пойду удалять везде js! Теперь только на css сайты буду писать)) P.s. счётчик классный! 😊

@user-pf5hy5lt2j Год назад

Все правильно

@Solcheg Год назад

Тот случай, когда на джс сделать проще)

@i-love-bitrix24 Год назад

Хочу более подробно ...

@victorr-name Год назад

В счетчике одна цифра на 3 кадра (при 60 к/с). Не совсем понятна его полезность

@antonyaz3506 Год назад

Такая булочка с корицей))

@frozyarozin4856 Год назад

ну , конечно подобные структуры можно было делать и раньше , но в большинстве случаев без js не обойтись , ведь css (в большинстве случаев статический объект) а вот на js мы можем достаточно просто менять значения прямо с сервера , сделать ту же загрузку например ( хотя это достаточно не просто ) , но для статических анимаций это неплохой способ разгрузить работу Frontend разработчика ))) так что видик хороший

@imgod113 Год назад

Что бы тригернуть событие в любом случае потребуется JS. Сомнительная фишка...

@Oxygen_56 Год назад

а есть курсы не для новичков? например у меня опыт 4-5 лет, но все равно мучает вопрос, что я что-то не знаю)

@annblok_webdev Год назад

Думаю, на таком уровне знаний, лучше поработать с ментором по конкретным запросам, разобрав темы, которые вызывают сомнения

@user-zh5kg2op4h Год назад

Читай статьи, спеки. Помогают подписки в соцсетях, особенно в твиттере. Можно поиграть самому, особенно в штуки вроде CSS Battle, return true to win (js). Там можно закапываться подолгу и на разные темы.

@yadreyy Год назад

@@annblok_webdev Аня, привет. Андрей Блок твой брат или муж?

@HandsomeRoman Год назад

кто может объяснить, в чем смысл таких курсов? ну научусь я верстать лендинги. только вот с такими задачами прекрасно справляются конструкторы.

@zanramongd8814 Год назад

Ким Векслер?

@comrader9409 Год назад

я вас люблю

@user-he2li7we7b Год назад

Можно просто убрать свойство инфинити и тогда анимация выполнится один раз

@echodephomine7672 Год назад

Так же Те кто учил js 10 лет : Япона Мама 😱

@tryingtoplaying Год назад

А теперь ребятишки, задачка! Попробуйте сделать "прирост" то есть от 0 до 100. Ссылки на codepen в студию!!!

@raissound Год назад

Мне кажется, я влюбился)

@safonovdmitry3849 Год назад

0% разве не равнозначно для From? 6:47

@annblok_webdev Год назад

Да, перепутала, to = 100%, но с другой стороны, если изменить 0% на 100%, то отсчет изменит порядок

@MrGeorgeMS Год назад

Лайк поставил. Но по мне так это бесполезно, да и зачем захламлять CSS, если для этого есть JS.

@fafn1r680 Год назад

Ева Эльфи, ты ли это?)

@stan6886 Год назад

Какая смешная симпотяжка, назвалась бы лучше Анна Inline-block

@user-oz9bp7jb4p Год назад

В чём смысл когда в js это делается в 2 строки?

@QwDragon Год назад

В прикольном примере вместо стандартного с градиентами. Я на css таймер давно делал - тогда ещё css-переменных даже не было.

@janedoe6182 Год назад

"Заставка: JS больше не нужен!!!!" - Урааа! JS больше не нужен! Его ведь только для обнуления счетчиков и использовали, а теперь в нем самая последняя необходимость отпала!