предисловие
Любое приложение, которое можно написать на JavaScript, в конечном итоге будет написано на JavaScript. - Закон Этвуда
Хотя все может быть JavaScript, но в определенной степени CSS будет работать эффективнее, чем JavaScript, поэтому я думаю: если вы можете использовать CSS, вам не нужно заморачиваться с JavaScript.
Оба языка служат разным целям. По мере расширения возможностей и свойств версии браузера CSS становится мощным языком, способным обрабатывать функциональные возможности, для достижения которых мы ранее полагались на JavaScript.
плавная прокрутка
Было время, когда нам приходилось полагаться на JavaScriptwindow.scrollYДля этого, если вы хотите плавно прокручивать, вам нужно полагаться на таймер, чтобы добавить анимацию. вместе сscroll-behaviorС добавлением свойств мы можем обеспечить плавную прокрутку на нашем веб-сайте с помощью одной строки CSS! Поддержка браузерами составляет около 75%, а совместимость довольно хорошая.
html {
scroll-behavior: smooth;
}
улов прокрутки
Слайд-шоу и галереи изображений также часто используются во внешнем интерфейсе.Предыдущее поколение CSS имеет ограниченные возможности, и нам приходится полагаться на JavaScript для выполнения этой функции. Эта функциональность теперь может быть достигнута с помощью всего нескольких строк кода.
В некотором смысле, это работает с Flexbox илиCSS Gridработает аналогично, т.е. вам нужен элемент контейнера, на котором можно установитьscrolln-snap-typeи множественный набор для негоscroll-snap-alignдочерние элементы , как показано ниже:
<main class=”parent”>
<section class=”child”></section>
<section class=”child”></section>
<section class=”child”></section>
</main>
.parent {
scroll-snap-type: x mandatory;
}
.child {
scroll-snap-align: start;
}
CSS-анимация
В какой-то момент большинство разработчиков использовали JavaScript (или jQuery) для анимации элементов в браузере. Пусть это исчезнет, пусть это расширится, просто. По мере усложнения интерактивных проектов и распространения мобильных устройств производительность становится все более важной. Flash был заброшен, и талантливые аниматоры использовали HTML5 для достижения эффектов, которые никогда не были возможны в прошлом. Им нужны лучшие инструменты для разработки сложных анимационных последовательностей и достижения максимальной производительности. JavaScript (или jQuery) не может этого сделать. По мере взросления браузеров они также начали предоставлять некоторые решения. Наиболее распространенным решением является использование CSS-анимации.
проверка формы
HTML5 обогащает элементы формы и предоставляет такие атрибуты элементов формы, как required , email , tel и так далее. Точно так же мы можем использовать :valid и :invalid для проверки атрибутов формы html5.
- Псевдокласс :required определяет элемент формы с обязательным атрибутом
- Псевдокласс :valid указывает элемент формы, который соответствует правильному требуемому элементу формы.
- Псевдокласс :invalid указывает на элемент формы, который не соответствует заданным требованиям.
Используйте атрибут атрибута содержимого CSS для очистки данных
Все, должно быть, думали о псевдоэлементе после того, как получить текст, и вы не можете использовать JavaScript.
Псевдоэлемент CSS - очень мощная вещь. Мы можем использовать его для многих приложений. Обычно, чтобы сделать какие-то эффекты, content: " " чаще всего оставляется пустым, но на самом деле вы можете написать в нем attr для захвата Информация!
<div data-msg="这里是获取content的内容">
hover
</div>
div{
width:100px;
border:1px solid red;
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}
Показывать, когда мышь наведена
Сцена наведения мыши очень распространена, например, в меню навигации:
Как правило, удобно использовать css для управления скрытыми вещами, такими как меню в качестве подэлементов или смежных элементов цели при наведении.Например, в приведенном выше меню меню используется как соседний элемент навигации:
<!--menu为相邻的li-->
<li class="user">用户</li>
<li class="menu">
<ul>
<li>账户设置</li>
<li>登出</li>
</ul>
</li>
Меню скрыто в обычных условиях:
.menu{
display: none;
}
А при навигации ховер показывает:
/*使用相邻选择器和hover*/
.user:hover + .menu{
display: list-item;
}
Обратите внимание, что здесь используется соседний селектор, поэтому он записывается как смежные элементы, как упоминалось выше. Позиция меню может быть позиционирована с помощью absolute.
При этом само меню должно отображаться при наведении, иначе меню будет исчезать при выходе мышки из навигации:
.menu:hover{
display: list-item;
}
Здесь будет небольшая проблема, то есть меню и навигация должны быть рядом друг с другом, иначе, если будет пробел посередине, добавленный выше меню не будет работать. На самом деле это легко решить, просто нарисуйте прозрачную область в меню, например, следующий синий квадрат:
Вы можете использовать ранее / после Pseudo-класса с позиционированием Absoute:
ul.menu:before{
content: "";
position: absolute;
left: 0;
top: -20px;
width: 100%;
height: 20px;
/*background-color: rgba(0,0,0,0.2);*/
}
Если я напишу и наведение CSS, и событие мыши, и использую мышь для управления отображением и скрытием, что произойдет с двойным эффектом? Если я буду следовать обычной рутине, при наведении в событие мыши я добавлю стиль отображения: блок, который переопределяет настройки CSS. То есть до тех пор, пока наведите один раз, код CSS не будет работать, потому что приоритет встроенных стилей будет выше, чем у внешних ссылок. А в реальности будут аварии, то есть на мобильном айфоне тач будет срабатывать наведение ССс, и срабатывание будет с большой вероятностью до события тачстарт. в настоящее время отображается или скрыт.Состояние, поскольку наведение CSS играет роль, оно оценивается как отображаемое, а затем снова скрывается. То есть, если вы нажмете один раз, он не выйдет, а щелкнет дважды. Так что лучше не писать оба одновременно. Второй сценарий с использованием дочерних элементов проще. Цель наведения и скрытый объект рассматриваются как дочерние элементы одного и того же родительского контейнера, и тогда наведение может быть записано в родительский контейнер.Нет необходимости писать наведение для скрытого элемента, как указано выше:
.marker-container .detail-info{
display: none
}
.marker-container:hover .detail-info{
display: block
}
наконец
Вот лишь некоторые часто используемые функции. На самом деле существует множество функций, которые можно реализовать с помощью CSS. Заинтересованные студенты продолжат изучать больше функций CSS, не зависящих от JavaScript.