Расширенные возможности CSS: добавление условных полей формы в блок «Мои пожертвования» в Squares... скачать в хорошем качестве

Расширенные возможности CSS: добавление условных полей формы в блок «Мои пожертвования» в Squares...

В этом видео я покажу, как использовал несколько очень полезных CSS-селекторов, которые позволили мне создать условные поля формы, которые можно было показывать или скрывать в зависимости от ответов в предыдущих полях формы. Это было необходимо, потому что формы для пожертвований пока не поддерживают условные поля. 🔗 Ссылки: ✅ Получить код: Связанные ресурсы: 💻 Бесплатный курс для начинающих по CSS для Squarespace: https://schwartz-edmisten.com/learn-c... 📝 Бесплатный курс по дизайну для Squarespace: https://schwartz-edmisten.com/custom-... 📚 Библиотека CSS-сниппетов для Squarespace: https://schwartz-edmisten.com/css-too... 📷 Оборудование, которое я использую для съёмки видео: https://schwartz-edmisten.com/resourc... Поддержите мой канал: ☕ Купите мне кофе: https://schwartz-edmisten.com/donate ✉️ Нанять меня: https://schwartz-edmisten.com/contact КТО Я? Если вы ещё не знакомы со мной — привет! 👋 Меня зовут Крис, я веб-дизайнер Squarespace, специализирующийся на настройке сайтов с помощью CSS. С помощью своих видео на этом канале, курсов и плагинов я помогаю веб-дизайнерам Squarespace по всему миру создавать более персонализированные макеты и воплощать в жизнь их видение веб-сайта. PS: Некоторые ссылки в этом описании являются партнерскими ссылками, за которые я получаю комиссионные 😜 ⌚ Временные метки: 0:00 - Введение: Проблема с формами пожертвований Squarespace, в которых отсутствуют условные поля 0:51 - Обзор решения на основе CSS и внешний вид формы 2:24 - Изучение структуры формы в инструментах разработчика Chrome 3:46 - Как значения полей ввода отображаются в HTML и как их можно обрабатывать с помощью CSS 4:15 - Разбор селекторов CSS: Прямые селекторы дочерних элементов 5:23 - Использование селектора :has() для выбора родительских элементов 5:52 - Выбор элементов-соседей с помощью + 6:33 - Отображение/скрытие полей в зависимости от состояния "отмечено" 7:35 - Более сложный пример: Описание поля для пожертвований 9:38 - Использование селектора тильды ~ для несмежных элементов-соседей 10:53 - Краткий обзор изученных селекторов (:checked, placeholders, значения) 11:33 - Бонус: Скрытие пустых меток с помощью селектора :empty 12:33 - Заключительный пример: Условные поля с флажками 15:20 - Подведение итогов и заключительные мысли #css #squarespace #squarespacecss Музыка:   / justin-kolas