Волшебный селектор: фокус - внутри

внешний интерфейс JavaScript анимация CSS
Волшебный селектор: фокус - внутри

CSSСелектор псевдоклассаа такжеСелектор псевдоэлементов, что делает CSS более мощным.

Псевдоклассы слышали много, а псевдоэлементы можно услышать не так часто, но CSS различает их.

Каждый раз, когда вы говорите о псевдоклассах, нужно упоминать об ошибке: иногда вы обнаружите, что элементы псевдоклассов используют два двоеточия (::) вместо одного двоеточия (:) Это часть спецификации CSS3. Цель состоит в том, чтобы отличить псевдоклассы от псевдоэлементов, большинство браузеров поддерживают следующие два представления.

Вообще говоря,

#id:after{
 ...
}

#id::after{
...
}

Для соответствия стандартам для псевдоклассов CSS3 используется одно двоеточие (:), а для псевдоэлементов CSS3 — двойное двоеточие (::).

Конечно, есть исключения.Для псевдоэлементов, которые уже есть в CSS2, таких как :before, запись с одним и двумя двоеточиями ::before имеет тот же эффект.

Поэтому, если ваш веб-сайт должен быть совместим только с webkit, firefox, Opera и другими браузерами или мобильными страницами, рекомендуется использовать двойное двоеточие для псевдоэлементов.Если вам нужна совместимость с более ранними версиями браузеров IE, используйте CSS2. одиночные двоеточия безопаснее.

Селектор псевдокласса:focus-within

Ближе к дому, о чем я собираюсь поговорить сегодня:focus-withinСелектор псевдокласса.

Он указывает, что элемент получает фокус или что потомки элемента получают фокус. фокус,он или его потомки получают фокус.

Это также означает,он или его потомки получают фокус, может вызвать:focus-within.

:focus-withinМокрота

Это свойство чем-то похоже на всплывающую подсказку событий в Javascript, начиная с фокусируемого элемента и продолжая до корневого элемента.html, может получить триггер:focus-withinсобытия, как этот простой пример:

<div class="g-father">
    <div class="g-children">
        <input type="button" value="Button">
    </div>
</div>

html,
body,
.g-father,
.g-children {
    padding: 30px;
    border:1px solid #999;
}

input {
    ...
    &:focus {
        background: #00bcd4;
    }
}

html:focus-within {
    background: #e91e63;
}
body:focus-within {
    background: #ff5722;
}
.g-father:focus-within {
    background: #ffeb3b;
}
.g-children:focus-within {
    background: #4caf50;
}

Вот и все:

focuswithinmaopao

CodePen Demo -- всплывающий триггер :focus-within

Существование этого селектора дает CSS дополнительную возможность сохранять элементы в новом состоянии.

Вот несколько примеров, см.:focus-withinЧто мы можем предоставить возможность сделать что-то.

Зондирование области фокусировки пользователя

он или его потомки получают фокус, что увеличивает воспринимаемую область фокусировки, поэтому чаще всего используется:focus-withinОщущение действия пользователя в области фокусировки, выделение напоминания.

Следующий эффект не имеет кода JS:

cssfocuswithinpesudo

Что это значит здесь?:focus-withinчто ты сделал?

  • Нам не нужно устанавливать сфокусированный элемент:focusПсевдокласс, но может быть установлен на желаемый родительский элемент, так что, когда элемент находится в фокусе, я также могу управлять стилем его родительского элемента.

Основная идея, выраженная в коде CSS, вероятно, выглядит так:

<div class="g-container">
    <div class="g-username">
        <input type="text" placeholder="user name" class="g_input" >
    </div>
    <div class="g-username">
        <input type="text" placeholder="code" class="g_input" >
    </div>
</div>

.g-container:focus-within {
    ...

    input {
        ....
    }
}

DEMO -- CSS focus-within INPUT

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

purecssfocus

DEMO -- PURE CSS FOCUS By :focus-within

Переключатель навигации TAB

В предыдущей статье были представлены два метода переключения панели навигации TAB, реализованные на чистом CSS:

Схема переключения вкладок панели навигации на чистом CSS

Теперь есть другой способ, используя:focus-withinВы можете получить фокус элемента на родительском узле и реализовать переключатель навигации TAB:

focuswithintab

DEMO -- focus-within switch tab

Основная идея — управлять другими селекторами через сфокусированное состояние, а самое главное — использовать родительский:not(:focus-within)чтобы установить стиль по умолчанию:

.nav-box:not(:focus-within) {
    // 默认样式
}

.nav-A:focus-within ~ .content-box .content-A {
    display: block;
}

.nav-B:focus-within ~ .content-box .content-B {
    display: block;
}

Сотрудничать:placeholder-shownЭффект формы реализации псевдо класса

:focus-withinЧеловек имеет ограниченные способности и обычно сотрудничает с другими псевдоклассами для достижения хороших результатов. Вот еще один интересный псевдокласс, чтобы кратко представить:placeholder-shown.

:placeholder-shown:Псевдокласс CSS :placeholder-show представляет любой<input> or <textarea> element that is currently displaying placeholder text.

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

Вероятно, это означает, что когдаinputТеги типа используют атрибут заполнителя с текстом заполнителя по умолчанию, который запускает этот стиль псевдокласса. Сотрудничать:not()Псевдокласс, вы можете изменить стиль, когда текст по умолчанию исчезнет, ​​и сотрудничать с главным героем этой статьи, мы можем добиться ряда эффектов формы.

Код CSS может выглядеть так:

.g-container {
    width: 500px;
    height: 60px;

    input {
        height: 100%;
        width: 100%;

        &:not(:placeholder-shown) {
            ...
        }

        &:placeholder-shown {
            ...
        }
    }

    &:focus-within {
        ...
    }
}

Фактический эффект выглядит следующим образом:

placeholder

Как видите, приведенный выше эффект не использует JS и может быть достигнут:

  1. Сфокусированное и не сфокусированное управление стилем всего ввода (включая область, в которой расположен родительский элемент)
  2. Элемент управления стилем после появления и исчезновения текста, заданного атрибутом заполнителя

CodePen Demo -- :placeholder-shown && :focus-within

Реализовать внеэкранную навигацию

Это функция, которая упоминалась во многих других статьях с использованиемfocus-withinУдобная реализация внеэкранной навигации, можно сказать, что функция этого свойства приведена в полную силу, здесь я прямо вставляю codepenDannie VintherРеализация этого эффекта:

offscreennav

CodePen Demo -- Off-screen nav with :focus-within [PURE CSS]

Реализовать динамическое переключение входа в Nuggets.

juejin.imЭто блог-сайт, который мне очень нравится. В его логине есть небольшое пасхальное яйцо. Панда вверху будет иметь разные состояния, когда вы вводите пароль учетной записи. Эффект следующий:

juejin

с использованиемfocus-within, вы можете добиться этой анимации без Javascript:

juejinfocuswithin

Если вы заинтересованы, вы можете нажать здесь, чтобы увидеть полный демо-код:

Демонстрация CodePen — реализация эффекта входа Nuggets на чистом CSS

совместимость

Ну примеры почти одинаковые.Теперь наступает момент совместимости убийства и убийства сердец.Условно этот атрибут имеет большую вероятность быть красным.Посмотрите на CANIUSE,дата скриншота(2018/08/02),на самом деле , это не очень мрачно.

image

наконец

Спасибо за ваше терпение, чтобы прочитать. Эта статья является всего лишь руководством, с нетерпением жду открытияfocus-withinБолее осмысленное использование.

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории