<header>
  <h2 class="title">CSS.supports()</h2>
  <p class="description">Метод перевіряє, чи підтримує браузер конкретні CSS-властивості або їх комбінації.</p>
</header>
<main>
  <div class="result">
    <!-- Поле вводу CSS правила -->
    <label for="cssProperty">Введіть CSS правило для перевірки:</label>
    <input type="text" id="cssProperty" placeholder="Наприклад, display: grid">

    <!-- Кнопка для перевірки підтримки -->
    <button id="checkSupport">Перевірити підтримку</button>

    <!-- Відображення результату -->
    <p id="supportResult">Результат перевірки буде тут...</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#cssProperty {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#checkSupport {
  padding: 10px 15px;
  border: none;
  background-color: #3498db;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

#supportResult {
  margin-top: 15px;
  font-weight: bold;
}

const cssPropertyInput = document.getElementById('cssProperty');
const checkSupportButton = document.getElementById('checkSupport');
const supportResult = document.getElementById('supportResult');

// Функція перевірки підтримки CSS властивостей
checkSupportButton.addEventListener('click', function() {
  const cssProperty = cssPropertyInput.value;

  // Перевірка підтримки через CSS.supports()
  const isSupported = CSS.supports(cssProperty);

  // Виведення результату на екран
  if (isSupported) {
    supportResult.textContent = `Ваш браузер підтримує: ${cssProperty}`;
    supportResult.style.color = 'green';
  } else {
    supportResult.textContent = `Ваш браузер НЕ підтримує: ${cssProperty}`;
    supportResult.style.color = 'red';
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.