Хотя кто-то может подумать, что обновление CSS относительно просто, здесь мы говорим о псевдоэлементах, которые иногда не так просты и зависят от браузера. Здесь мы сравним каждый подход и обсудим, когда какой использовать.
Некоторые соответствующие варианты использования, в которых вы можете столкнуться с этой проблемой:
- Полосы прокрутки (включая «большой палец» и т. д.)
- Кнопка ввода (тип = файл)
- Индикаторы выполнения (для тегов видео/аудио)
- Стили только для первой строки абзаца
В качестве примера мы будем использовать кнопку «выбрать файл» на входе (type = file).
Прежде чем читать дальше, получите следующие две вещи:
СОЗДАЙТЕ МЫШЛЕНИЕ
Смысл этих «тактик» в том, чтобы научиться думать и как бы знать план решения проблемы. Это позволяет вам быть самосознательными и продолжать заставлять себя узнавать следующий лакомый кусочек информации, так что это дает вам преимущество как программист.
СНАЧАЛА ПРОВЕРЬТЕ СЕБЯ
Вам не поможет просто прочитать эту статью. Сначала попробуйте предугадать, что я скажу, используя свои собственные знания, а затем проверьте, не говорю ли я вам что-то новое. ТАК ВЫ ЗАПОМНИТЕ ЭТО ЛУЧШЕ!
Метод 1: «D» для «Duh», «Documentation» и «DOM»
Подход
Вот такой ответ: посмотрите документацию; вы пытаетесь найти правильный селектор запросов, чтобы изменить свой CSS. Вот список всех псевдоэлементов, которые вам нужно знать (dw, их немного!)
Пример
- Вот как должен выглядеть CSS. Главный вывод здесь — это символы «::», и из этого вы должны усвоить, что всякий раз, когда мы говорим о псевдоэлементах, эти символы должны отображаться.
2. Вот как это будет выглядеть в Styled-components
"У меня нет доступа к документации, есть ли более простой способ?" ДА
Он называется теневой DOM (TL; DR: он отвечает за стиль браузера по умолчанию). Хотя по умолчанию он не отображается в консоли Chrome, вы можете зайти в настройки (открыть консоль → нажать на значок шестеренка), а затем выбрать следующее:
Мой совет, всегда держите это включенным и, возможно, даже до перехода к документации, сначала получите доступ к этому! Таким образом, вы, по крайней мере, будете знакомы с тем, что ищете в документации, чтобы избежать догадок и тонн гугления.
Когда я должен это сделать?
Я собираюсь предложить, чтобы это все еще оставалось вашим основным процессом, потому что большая часть документации — хотя временами она кажется неясной — уже поддерживает то, что вы ищете. Итак, если вы не собираетесь изменять функциональность изначально разработанного элемента, обязательно используйте этот метод.
Способ 2: способ «показать = скрыть»
Подход
Общий принцип таков:
- Скрыть исходный элемент (CSS: «display: hidden»)
- Создайте альтернативный элемент, который выглядит так, как вы хотите.
- Вы связываете их (используя «useRef/refs» в React и получая доступ к идентификатору через vanilla JS)
Крутость этого подхода в том, что вы не создаете всю бизнес-логику с нуля, а сохраняете исходные элементы. Затем через refs (или выбрав «id», если вы используете vanilla JS) вы запускаете исходный элемент через новый элемент!
Пример:
Кнопка Medium «добавить изображение» (в их редакторе) использует этот метод. Обратите внимание, что хотя кнопка выглядит по-другому, нажатие на нее по-прежнему приводит к выбору файла (т. е. поведение такое же)!
Пример упрощенного кода того, как, вероятно, будет выглядеть этот компонент React. Обратите внимание, что ввод «скрыт» (здесь для простоты используется встроенный JS), а другой компонент расположен прямо под ним (не то чтобы это имело значение). Также обратите внимание, как ссылки используются здесь в функции «handleClick».
Когда я должен использовать его?
Я бы порекомендовал вам использовать этот метод в конкретных ситуациях. А именно:
- Если у вас уже есть предопределенный компонент, на который вы хотите, чтобы он выглядел, вы можете избежать репликации CSS esp. если вы используете стилизованные компоненты или аналогичную библиотеку.
- Если вы собираетесь добавить какое-то пользовательское поведение, которое вы бы добавили поверх того, что браузер делает по умолчанию.
- Если первая тактика (с использованием документации, предоставленной для псевдоэлемента браузера) отличается от браузера к браузеру, и вы хотите быть в безопасности при написании своего CSS.
Почему это проблематично?
Потому что для определенных вещей браузер может не поддерживать этот метод! Так что лучше всегда сначала проверять документацию.
Способ 3: метод «наложения»
Я не буду здесь вдаваться в подробности, так как этот метод очень похож на предыдущий (хотя, конечно, немного надежнее!)
Подход
Идея проста: у вас есть свой собственный компонент и оригинальный; и, по сути, вы пытаетесь разместить один компонент поверх другого, так что когда пользователь видит ваш пользовательский компонент, он фактически взаимодействует с исходным!
Итак, вы будете делать следующее:
- Вместо «display: none» для исходного компонента вы установите его «opacity: 0». Он по-прежнему скрыт, но по-другому!
- Затем вы убедитесь, что размеры двух компонентов точно такие же, чтобы взаимодействие с пользователем не мешало.
- Установите исходный компонент поверх другого, используя свойство z-index.
- Установите его так, чтобы исходный компонент и ваш пользовательский компонент не совпадали каждый раз; вы можете сделать это, установив значение их позиций
(например, «position: absolute, top: 0, …»)
Мои мысли об этом подходе:
Честно говоря, я ненавижу эту идею из-за ее хакерства и из-за того, что это своего рода творчество, которое не дает вам большого преимущества в знании того, как работает браузер или JS.
При этом я предпочитаю иметь этот подход в своем наборе инструментов, потому что мне нравится решать проблемы, и я знаю, что мое вышеупомянутое мнение не влияет на варианты использования: кто знает, может быть, я столкнусь с проблемой в какой-то момент, когда я обязательно должен использовать этот метод, и я предпочел бы знать принцип, чем игнорировать его :)
Способ 4. Полностью настраиваемый с нуля
Это полностью выходит за рамки браузера, так что, скажем, в этом случае вы хотите выбрать файл, но вы хотите полностью изменить пользовательский интерфейс, поведение и внутреннюю логику.
Я, честно говоря, для этого примера не могу придумать, зачем вам это нужно, но если хотите — вы знаете, что делать! По сути, вам нужно:
- Сначала создайте свою пользовательскую кнопку (это может быть даже не тег ввода)
- Вам нужно выяснить, как пользователь будет выбирать файл (опять же, этот подход предполагает, что вы не хотите открывать окно выбора файла); так что, если вы визуализировали совершенно новый метод или способ — это он.
Некоторые мысли, которые приходят на ум: я могу представить, как кто-то пытается сделать это с полосой прокрутки или с тегом видео, где они хотят, чтобы оно выглядело и вело себя совершенно по-другому! Помните: вещи, которые сегодня кажутся нам очевидными (например, режим видео "картинка в картинке"), когда-то были придуманы кем-то другим! Поэтому не отказывайтесь от этого полностью.
Резюме
Есть четыре способа, о которых я знаю до сих пор:
- Посмотрите документацию: это наш выбор.
- Скрыть оригинал; связать его с пользовательским компонентом
- Сделайте оригинал непрозрачным и поместите его прямо поверх пользовательского компонента.
- Создайте свой собственный с нуля, используя div и span.
Если вы думаете, что я что-то упускаю, пожалуйста, определите. комментарий и дайте мне знать!
