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

Рет қаралды 77,126

Күн бұрын

🔥 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

Пікірлер: 268

@annblok_webdev Жыл бұрын

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

@angelsave Жыл бұрын

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

@adwers6427 Жыл бұрын

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

@AveWoff Жыл бұрын

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

@sergeymickolaenko1161 Жыл бұрын

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

@EugenySubbotin Жыл бұрын

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

@medeymarsik6566 Жыл бұрын

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

@mybestislands8646 Жыл бұрын

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

@JeanaUchiha Жыл бұрын

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

@michaelkamko Жыл бұрын

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

@user-bf5uz7qg3n Жыл бұрын

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

@xusniddinraximov9799 Жыл бұрын

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

@sergeyplotnikov4303 Жыл бұрын

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

@user-oo1dn8gv7y Жыл бұрын

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

@tolasnisar2494 Жыл бұрын

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

@DimaAni Жыл бұрын

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

@user-ve7tx3ud6n Жыл бұрын

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

@mirandaflaris4785 Жыл бұрын

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

@user-yr9lq3vh2s Жыл бұрын

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

@user-ti9ev4nw2k Жыл бұрын

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

@alexeydeveloper9072 Жыл бұрын

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

@dmitryn.4506 Жыл бұрын

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

@Ilya-gv6kb Жыл бұрын

Спасибо 🙂👍🔥

@user-dp9qj4ko9n Жыл бұрын

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

@losmalenkiy903 Жыл бұрын

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

@progerlife6690 Жыл бұрын

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

@imgod113 Жыл бұрын

не обойтись

@Alex_Presli Жыл бұрын

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

@rubenghambaryan Жыл бұрын

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

@deko4132 Жыл бұрын

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

@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 все правильно было показано, чтобы было более нагляднее (переопределение по иерархии)

@user-od9ft9sc6q Жыл бұрын

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

@armag9979 Жыл бұрын

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

@sanji1253 Жыл бұрын

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

@dashazar4461 Жыл бұрын

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

@user-xc2yu7ib3r Жыл бұрын

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

@user-in5tf1ol5d Жыл бұрын

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

@sk89061 Жыл бұрын

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

@kopchik1000 Жыл бұрын

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

@user-xj6ur2ei9k Жыл бұрын

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

@tsprog4284 Жыл бұрын

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

@andriiprok8080 Жыл бұрын

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

@liverd Жыл бұрын

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

@qualitytransportation Жыл бұрын

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

@svhanz Жыл бұрын

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

@larenes Жыл бұрын

кринж

@yadreyy Жыл бұрын

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

@user-wl7cv7ey2m Жыл бұрын

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

@svetogor777 Жыл бұрын

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

@user-ow2hr5xk8t Жыл бұрын

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

@user-ow2hr5xk8t Жыл бұрын

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

@PAGARbon Жыл бұрын

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

@tilted_depressed Жыл бұрын

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

@user-wf6ue9wp8c Жыл бұрын

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

@mclotos Жыл бұрын

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

@user-ct2dv3vr1n Жыл бұрын

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

@mclotos Жыл бұрын

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

@user-ie2ci1cl3c 10 ай бұрын

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

@ulianaeln2259 Жыл бұрын

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

@user-olena_shatun Жыл бұрын

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

@s1ntun956 Жыл бұрын

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

@annblok_webdev Жыл бұрын

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

@ilunya_kozyr Жыл бұрын

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

@mr.jivchik2432 Жыл бұрын

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

@Savina540 Жыл бұрын

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

@snippet_dev8079 Жыл бұрын

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

@user-ti8pi8oj2e Жыл бұрын

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

@user-pf5hy5lt2j Жыл бұрын

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

@PearlDpUa Жыл бұрын

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

@annblok_webdev Жыл бұрын

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

@user-xh9iz3uw6j Жыл бұрын

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

@frozyarozin4856 Жыл бұрын

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

@sergeyterekhin3685 Жыл бұрын

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

@crazyshow4209 Жыл бұрын

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

@mclotos Жыл бұрын

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

@P4P4_C4RL0 Жыл бұрын

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

@movsesharutyunyan1100 Жыл бұрын

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

@Krylowandrey Жыл бұрын

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

@annblok_webdev Жыл бұрын

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

@yupvysotskyi6264 Жыл бұрын

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

@nikolaydd6219 4 ай бұрын

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

@derek233223 Жыл бұрын

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

@comrader9409 Жыл бұрын

я вас люблю

@tryingtoplaying Жыл бұрын

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

@XAH30 Жыл бұрын

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

@user-zj5jj4uf9y Жыл бұрын

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

@annblok_webdev Жыл бұрын

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

@robereds245 Жыл бұрын

JavaScript как по мне самый топовый язык!

@VeloVetal Жыл бұрын

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

@II-hs9qm Жыл бұрын

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

@i-love-bitrix24 Жыл бұрын

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

@antonyaz3506 Жыл бұрын

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

@alexeiweb6971 Жыл бұрын

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

@MrGeorgeMS Жыл бұрын

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

@user-he2li7we7b Жыл бұрын

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

@user-hn7fn5zm7j Жыл бұрын

Это не заменит яваскрипт, но возможность в CSS действительно хорошая. Однако, как по мне, на яваскрипт то же самое делается гораздо проще

@zanramongd8814 Жыл бұрын

Ким Векслер?

@Solcheg Жыл бұрын

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

@cryfos Жыл бұрын

🤩

@Oxygen_56 Жыл бұрын

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

@annblok_webdev Жыл бұрын

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

@levsonc Жыл бұрын

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

@yadreyy Жыл бұрын

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

@echodephomine7672 Жыл бұрын

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

@raissound Жыл бұрын

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

@victorr-name Жыл бұрын

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

@mzx6531 Жыл бұрын

Ну конечно оно не заменит Жабаскрип, но тем не менее видео полезное, как минимум, полегче будет фронтеру

@fafn1r680 Жыл бұрын

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

@janedoe6182 Жыл бұрын

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