вівторок , Липень 25 2017

Головні новини
Ви тут: Головна / css / Що можна зробити за допомогою CSS?

Що можна зробити за допомогою CSS?



Останнім часом я зацікавився в тому, як сильно можна заглибитися у використанні рішень, заснованих тільки на CSS, щоб по максимуму позбутися JavaScript при проектуванні інтерфейсів.

Прошу запам’ятати: деякі з цих демонстраційних прикладів реалізовані тільки для того, щоб показати, яким потужним став CSS. Я ще розповім, чому деякі з цих демок варто було б перенести на JavaScript.

І ще: щоб не ускладнювати, я надам тільки необхідні фрагменти HTML і CSS. Не варто очікувати, що при копіюванні матеріалу зі статті здобуде такий же ефект, як і в нижченаведених демках. Але якщо ви хочете подивитися повний код прикладу – можна перейти на сайт jsfiddle, також в кінці статті я надам посилання на файли з вихідним кодом.

Приклад простої форми

Нижче представлений варіант оповіщення користувача при заповненні форми.

Тут представлені три текстових поля, в якості міток використовуються label. Звичайно, це не дуже добре позначається на призначеному для користувача взаємодії, але я потрапляв в багато ситуації, коли головний дизайнер забороняв використання видимих ​​міток.

Буває.

Моє рішення цієї надуманої проблеми полягає в тому, щоб перетворити мітки в “спливаючі нагадування”, коли користувач переводить фокус на полі введення:

<div class="form-row">
  <input type="email" class="input-text" id="name2" placeholder="Your Email" />
  <label class="label-helper" for="name2">Your Email</label>
</div>

Як видно в цій ділянці HTML немає ніякої магії. Єдина незвична річ полягає в тому, що елемент

А ось цей шматок CSS змусить все це працювати:

.form-row {
  position: relative;
}

.input-text {
  background-color: #fff;
  border: 1px solid #ccc;
  margin-bottom: 8px;
  padding: 8px 4px;
  position: relative;
  width: 100%;
  z-index: 3;
}

.label-helper {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: .2s bottom, .2s opacity;
  z-index: 1;
}

Перший блок CSS – це стилі за замовчуванням для полів вводу. Стиль .form-row утримує абсолютно позиційований елемент .label-helper поруч з відповідним полем вводу.

Елемент .input-text позиційований відносно, а z-index до нього застосований тому, що ми не хочемо, щоб мітка перекривала поле вводу при переході.

А ось і CSS, який обробляє показ мітки при зміні фокусу:

.input-text:focus + .label-helper,
.input-text:invalid + .label-helper {
  bottom: 95%; /* magic number, boo */
  font-family: arial;
  font-size: 14px;
  line-height: 1;
  opacity: 1;
  padding: 4px;
}

.input-text:invalid {
  border-left: 10px solid #f00;
}

.input-text:invalid + .label-helper:after {
  color: #f00;
  content: "X";
  font-family: arial;
  font-size: 14px;
  line-height: 1;
  padding-left: 12px;
}

Важливим моментом є використання псевдо-класу :focus в комбінації з селектором сусідніх елементів (селектори сусідніх елементів відіграють важливу роль в наших демонстраційних прикладах).

Тому нам і треба розміщувати мітки після полів введення, так як інакше не буде працювати селектор сусідніх елементів.

Простіше кажучи, коли елемент потрапляє у фокус, сусідній елемент (мітка) стає видимим, і змінює своє положення так, щоб опинитися над полем введення, і надає користувачеві підказку, так як заповнювач поля більш не відображається.

Як невелике доповнення я підсвічують поле вводу email-а, якщо в ньому помилка. Так як поля введення не підтримують псевдо-елементи, помилка ‘x’ застосовується до мітці.

Кілька складніших варіантів використання

Наведений вище приклад набуває популярності. Як я знаю, я не перший і не останній, хто використовував ефект для відображення підказки.

Переходи для односторінкових сайтів

Ось HTML:

<input type="radio" class="radio" name="pages" id="exit" checked />

<div class="page demo2">

  <input type="radio" class="radio" name="pages" id="page_1" />
  <section class="section-container section-one">
    <label for="exit" class="check-label exit-label">
      X
    </label>
    <label for="page_1" class="page-label check-label">
      <span>Page X</span>
    </label>
    <header class="section-header">
      <div class="section-content">
        <h1>
          Title of Section X
        </h1>
      </div>
    </header>
    <div class="section-info">
      <div class="section-content">
        <p>
          ...
        </p>
      </div>
    </div>
  </section>

  <!-- repeat this 3 more times, with IDs of
       "page_2, page_3, and page_4" -->

</div>

Можливо, ви помітили використання елементів <input type=”radio”> на початку кожного розділу. В CSS ми будемо грунтуватися на них, так як нам також потрібно спиратися на селекторі сусідніх елементів (+), щоб змусити працювати ефекти переходу.

Простіше кажучи, ми будемо використовувати стан :checked перемикачів, які будуть активуватися кліком по відповідній мітці, і за допомогою селектора сусідніх елементів ми будемо міняти їх розміщення за допомогою простого CSS.

А ось і сам CSS:

.radio,
.exit-label {
  display: none;
  height: 0;
  visibility: hidden;
}

.exit-label {
  border: 1px solid #333;
  color: #444;
  display: inline-block;
  padding: 4px 12px;
  text-decoration: none;
}

.page-label {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

.page-label span {
  position: relative;
  top: 50%;
}

Вищенаведений CSS забезпечує стилізацію “кнопок”, а також приховує перемикачі, відключаючи їх відобра та інтерфейс.

Елементи .page-label і .page-label span використовуються для великих кнопок-панелей, тоді як клас .exit-label стилізує кнопку “закриття” відкритої панелі (знову ж, мітки, стилізовані під кнопки).

.section-container {
  border: 0px solid;
  height: 50%;
  overflow: hidden;
  position: fixed;
  transform-origin: center center;
  transition: 0.4s all;
  width: 50%;
  z-index: 1;
}

.section-content {
  margin: auto;
  max-width: 800px;
  opacity: 0;
  padding: 20px;
  transition: 0.66s all;
  visibility: hidden;
}

.section-one {
  transform: translate(0%, 0%);
}

.section-two {
  transform: translate(0%, 100%);
}

.section-three {
  transform: translate(100%, 0%);
}

.section-four {
  transform: translate(100%, 100%);
}

Тут у нас настройка контейнерів панелей (розділів) та їх вмісту. Контейнери мають розмір 50% від загальної висоти і ширини, що схоже на відповідний приклад з Codrops.

Розділи позиціонуються за допомогою transform: translate, замість того, щоб використовувати позиціонування зверху / зліва / знизу / справа. Це тому, що трансформації краще позначаються на продуктивності, так як вони не вимагають інтенсивної перемальовування, як це відбувається у випадку зі зміною позиції елемента.

:checked + .section-container {
  height: 100%;
  overflow: auto;
  transform: translate(0%, 0%);
  width: 100%;
  z-index: 5;
}

:checked + .section-container .exit-label {
  display: inline-block;
  visibility: visible;
}

:checked + .section-container .page-label {
  display: none;
}

:checked + .section-container .section-content {
  opacity: 1;
  visibility: visible;
}

#exit:checked + .page .section-container {
  border: none;
  opacity: 1;
}

.page :not(:checked) + .section-container {
  border: 40px solid;
}

А ось і весела частина, де ми перевіряємо, якщо перемикач був обраний, і якщо так, то:

.section-container змінює свої розміри до повної висоти і ширини, і трансформується в верхнє ліве положення вікна браузера
кнопка закриття та вміст розділу стають видимими
мітка, на яку скликали, стає невидимою, так що по ній більше не можна клікнути, і не перекриває вміст секції, яке тільки що було відображено
секціям, що не були обрані, проставляється межа, яка збільшується до розміру 40px, симулюючи ефект “зменшення” на тлі секції, яка розгортається на весь екран.

Альтернативні ефекти переходу

На основі злегка переробленої розмітки з попереднього прикладу, я уявляю ще два приклади, які слідують тим же концепціям, що і минулий приклад.

Демо:

Демо:

Проблема цих прикладів полягає в тому, що не дивлячись на всю їх крутість і те, що вони показують, як багато всього можна зробити за допомогою CSS, в них все дуже погано в плані доступності для користувачів з обмеженими можливостями.

Вони використовують перемикачі та мітки для обходу необхідності використання семантично коректних кнопок, і JavaScript, необхідного для контролю цих кнопок. Для зрячих користувачів, які переглядають сторінки за допомогою миші і сенсорних екранів, не виникає будь-яких проблем з переглядом цих демонстраційних прикладів. Але якщо ми хочемо, щоб і користувачі, що використовують для навігації клавіатуру теж не відчували проблем з переглядом, необхідно буде повернутися до використання JavaScript для написання семантично коректного коду та маніпуляції розмітки. Також потрібно буде писати ще більше JavaScript коду для того, щоб застосовувати до елементів коректні ARIA атрибути, і коректно обробляти клавіатурні команди, щоб елементи нашої сторінки коректно поводилися при використанні клавіатури.

Чесно кажучи, мені було нелегко змусити працювати ці приклади, і я не хотів братися за написання додаткового JavaScript, який би забезпечив дотримання стандартів доступності – простіше було б використовувати відповідні за семантиці елементи і обробляти їх за допомогою JavaScript.

Прийнявши це до відома, давайте перейдемо до наступного прикладу, який куди як більш доступний користувачам з обмеженими можливостями, але дозволяє отримати схожі результати.

На завершення

CSS – потужний інструмент, який дозволяє робити безліч речей, для яких ми раніше використовували Javascript або jQuery. Але потрібно уникати реалізації рішень, які можуть стати справжнім кошмаром в доступності для користувачів з обмеженими можливостями, якщо надто захопитися використанням CSS.

Наостанок нагадаю – переконайтеся, що вашими експериментами ви не додали користувачам клопоту з використанням вашої програми. І у випадку з веб-додатками, можливо, краще сильно не мудрувати, і використовувати JavaScript для реалізації переходів між станами. Але наведені приклади більше служать для натхнення, ніж є закликом до використання.

Вихідні файли для скачування.



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers