JS властивість CSSStyleDeclaration.columnFill

Загальний опис

element.style.columnFill - це властивість CSS, яка визначає, як вміст розподіляється між колонками багатоколонкового макету. Вона може мати значення balance, що означає рівномірний розподіл вмісту між колонками, або auto, що дозволяє заповнювати колонки послідовно.

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

Для використання columnFill в JavaScript спочатку потрібно отримати доступ до DOM-елемента за допомогою одного з методів, таких як getElementById, getElementsByClassName або querySelector. Після цього можна встановити значення columnFill:

let element = document.getElementById('myElement');
element.style.columnFill = 'balance';

Цей приклад встановлює, що вміст елемента myElement буде рівномірно розподілений між колонками.

З іншого боку, якщо ви хочете, щоб колонки заповнювалися послідовно, ви можете встановити значення columnFill на auto:

let element = document.getElementById('myElement');
element.style.columnFill = 'auto';

Це означає, що вміст буде заповнювати одну колонку повністю перед початком заповнення наступної.

Використання columnFill разом з іншими властивостями багатоколонкового макету, такими як columnCount та columnGap, може допомогти створити більш складні та привабливі макети. Наприклад, ви можете поєднати ці властивості для створення адаптивного дизайну:

let element = document.getElementById('myElement');
element.style.columnCount = 3;
element.style.columnGap = '20px';
element.style.columnFill = 'balance';

Цей приклад створює трьохколонковий макет з відстанню між колонками у 20 пікселів та рівномірним розподілом вмісту.

Однією з практичних проблем, які можна вирішити за допомогою columnFill, є контролювання розподілу тексту в колонках при різних розмірах вікна. Це особливо корисно для адаптивних веб-сторінок, де потрібно забезпечити оптимальне розміщення контенту на різних пристроях:

function adjustColumnFill() {
  let element = document.getElementById('content');
  if (window.innerWidth < 600) {
    element.style.columnFill = 'auto';
  } else {
    element.style.columnFill = 'balance';
  }
}

window.addEventListener('resize', adjustColumnFill);
adjustColumnFill();

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

Загалом, element.style.columnFill є потужним інструментом для веб-розробників, що дозволяє налаштовувати багатоколонковий макет і контролювати розподіл вмісту між колонками. Це сприяє покращенню читабельності та візуального балансу на веб-сторінках, що є важливим аспектом сучасного веб-дизайну.

Порада:

Використовуйте JavaScript для динамічного зміни значення columnFill на основі контенту. Наприклад, якщо ви маєте динамічний контент, ви можете перевірити висоту колонок і змінити columnFill, щоб уникнути значних різниць у висоті між колонками:

function adjustColumnFill(element) {
    const columns = element.querySelectorAll('.column');
    const heights = Array.from(columns).map(col => col.offsetHeight);
    const maxHeight = Math.max(...heights);
    const minHeight = Math.min(...heights);

    if (maxHeight - minHeight > 100) {
        element.style.columnFill = 'auto';
    } else {
        element.style.columnFill = 'balance';
    }
}

Порада:

Використовуйте columnFill для поліпшення доступності. Наприклад, при використанні columnFill: auto, можна забезпечити більш логічний порядок читання для користувачів з екранними читалками. Це важливо, коли контент містить багато тексту і потрібно, щоб він був легко читабельним:

element.style.columnFill = 'auto';

Ви також можете додати додаткові атрибути для доступності:

<div role="presentation" aria-label="multi-column content" style="column-count: 3; column-fill: auto;">
    <!-- Контент тут -->
</div>

Синтаксис

element.style.columnFill

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачам перемикатися між режимами balance та auto, натискаючи відповідні кнопки. Це демонструє, як змінюється розподіл вмісту між колонками при різних значеннях columnFill. Користувачі можуть експериментувати з цими налаштуваннями, щоб побачити, як вони впливають на вигляд і читабельність контенту, що робить цей приклад корисним для навчання і практики роботи з багатоколонковими макетами.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYarKON">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад показує, як динамічно змінювати значення columnFill залежно від розміру вікна браузера. Це корисно для адаптивних макетів, де потрібно забезпечити різний розподіл контенту на різних пристроях: на менших екранах вміст заповнюватиме колонки послідовно, а на більших – рівномірно розподілятиметься.

let container = document.getElementById('dynamicContent');

function adjustColumnFill() {
  if (window.innerWidth < 800) {
    container.style.columnFill = 'auto';
  } else {
    container.style.columnFill = 'balance';
  }
}

window.addEventListener('resize', adjustColumnFill);
adjustColumnFill();

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

let article = document.getElementById('newsArticle');
let toggleButton = document.getElementById('toggleFill');

toggleButton.addEventListener('click', function() {
  if (article.style.columnFill === 'balance') {
    article.style.columnFill = 'auto';
  } else {
    article.style.columnFill = 'balance';
  }
});

JS довідник

JavaScript

Наповнення JS розділу