#фишка дня
Зафиксировать заголовки таблиц ещё никогда не было так просто. В статье на CSS-Tricks объясняются принципы работы этого решения: мы фиксируем все заголовочные ячейки (th) таблиц и даём им лишний уровень z-index, чтобы они были поверх обычных ячеек; а чтобы при горизонтальном скролле левые th не перекрывались правыми – их поднимаем ещё выше.
Впрочем, это решение давно с нами: https://codepen.io/estelle/pen/MNwVxW
#css #sticky #table
Зафиксировать заголовки таблиц ещё никогда не было так просто. В статье на CSS-Tricks объясняются принципы работы этого решения: мы фиксируем все заголовочные ячейки (th) таблиц и даём им лишний уровень z-index, чтобы они были поверх обычных ячеек; а чтобы при горизонтальном скролле левые th не перекрывались правыми – их поднимаем ещё выше.
Впрочем, это решение давно с нами: https://codepen.io/estelle/pen/MNwVxW
#css #sticky #table
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
#css #table #keyboard #focus #a11y
#библиотека дня
Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.
Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.
Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.
Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.
Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.
Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.
Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?
Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.
Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/
Принцип работы прост: берётся таблица, указываются пара классов, основной и тип желаемой диаграммы, и в некоторых случаях – в стили через установку значений свойств ячеек передаются реперные точки. Всё, ваша таблица стала, например столбчатой диаграммой.
Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.
Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.
Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!
#css #table #chart #diagram
Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.
Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.
Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.
Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.
Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.
Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.
Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?
Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.
Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/
Принцип работы прост: берётся таблица, указываются пара классов, основной и тип желаемой диаграммы, и в некоторых случаях – в стили через установку значений свойств ячеек передаются реперные точки. Всё, ваша таблица стала, например столбчатой диаграммой.
Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.
Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.
Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!
#css #table #chart #diagram
#заметка дня
В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.
Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.
Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.
Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).
Ну и на закуску: если вы выдаёте какие-то данные, будьте готовы к тому, что люди их захотят скопировать в условный Эксель. Таблицы это поддерживают по-умолчанию: скопировали да вставили.
А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.
#css #table #grid #codepen #таблица
В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.
Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.
Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.
Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).
Ну и на закуску: если вы выдаёте какие-то данные, будьте готовы к тому, что люди их захотят скопировать в условный Эксель. Таблицы это поддерживают по-умолчанию: скопировали да вставили.
А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.
#css #table #grid #codepen #таблица
Elementqueries
elementqueries.com - elementqueries Resources and Information.
elementqueries.com is your first and best source for all of the information you’re looking for. From general topics to more of what you would expect to find here, elementqueries.com has it all. We hope you find what you are searching for!
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
То тут то там можно услышать, что Google Chrome с 91 версии исправил что-то там в таблицах. А точнее, в их рендеринге. Но что конкретно?
А вот давайте и посмотрим, с примерами: https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/
Итак, по-порядку:
1. Ширина колонок наконец-то может быть в долях пикселей. 33.333px вместо 33px, 33px и 34px как было раньше.
2. TD/TH начали поддерживать writing-mode без дополнительных обёрток. Т. е. можно делать вертикальные заголовки и содержимое.
3. colgroup начал поддерживать схлопывание колонок (visibility: collapse).
4. Полноценная поддержка position: sticky на всех элементах таблицы.
К сожалению, в отстающих теперь Safari. Надеюсь, это ненадолго. У Firefox дела давно весьма хорошо.
Да и прогрессивное улучшение никто не отменял.
#css #table #sticky
То тут то там можно услышать, что Google Chrome с 91 версии исправил что-то там в таблицах. А точнее, в их рендеринге. Но что конкретно?
А вот давайте и посмотрим, с примерами: https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/
Итак, по-порядку:
1. Ширина колонок наконец-то может быть в долях пикселей. 33.333px вместо 33px, 33px и 34px как было раньше.
2. TD/TH начали поддерживать writing-mode без дополнительных обёрток. Т. е. можно делать вертикальные заголовки и содержимое.
3. colgroup начал поддерживать схлопывание колонок (visibility: collapse).
4. Полноценная поддержка position: sticky на всех элементах таблицы.
К сожалению, в отстающих теперь Safari. Надеюсь, это ненадолго. У Firefox дела давно весьма хорошо.
Да и прогрессивное улучшение никто не отменял.
#css #table #sticky
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
👍17
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
👍11🔥3
#фишка дня
В эфир с ноги врывается Ли Робинсон с простым, но максимально эффективным способом улучшить читабельность ваших таблиц, унифицировав ширину цифр:
🔨 Как применять? Вот так: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
👀 Где посмотреть в работе? Вот тут: https://ncaam.vercel.app/66
Пользуемся, отдыхаем.
#css #table #font #monospace
В эфир с ноги врывается Ли Робинсон с простым, но максимально эффективным способом улучшить читабельность ваших таблиц, унифицировав ширину цифр:
font-variant-numeric: tabular-nums.🔨 Как применять? Вот так: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
👀 Где посмотреть в работе? Вот тут: https://ncaam.vercel.app/66
Пользуемся, отдыхаем.
#css #table #font #monospace
👍17🔥7🤯2👏1
#заметка дня
В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.
Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.
Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.
Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).
Ну и на закуску: если вы выдаёте какие-то данные, будьте готовы к тому, что люди их захотят скопировать в условный Эксель. Таблицы это поддерживают по-умолчанию: скопировали да вставили.
А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.
#css #table #grid #codepen #таблица #бородач
В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.
Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.
Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.
Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).
Ну и на закуску: если вы выдаёте какие-то данные, будьте готовы к тому, что люди их захотят скопировать в условный Эксель. Таблицы это поддерживают по-умолчанию: скопировали да вставили.
А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.
#css #table #grid #codepen #таблица #бородач
codepen.io
Responsive Tables: Grid Layout
...
🔥9❤4👍2🤔1
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
👍19
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
Ладно, раз уж подняли тему адаптивных таблиц, есть ещё большое количество применимых техник.
Один из наиболее полных сборников таких техник, это jQuery-плагин https://github.com/filamentgroup/tablesaw
1. Stack aka "вытягивание" таблиц в колонку.
2. Отображение только выбранных колонок
3. "Карусель" по колонкам, которые помещаются в экран.
Ну и в качестве бонуса, сортировка и "карта" отображаемых колонок, чтобы хоть как-то сориентироваться по ним.
Этот плагин официально неактивен с 2018 года, хоть и всё ещё работает. Это же веб, камон.
Но создатели вдохновили автора веб-компонента table-saw на свою реализацию stack-режима: https://github.com/zachleat/table-saw
И вот эта штука уже очень интересная и современная Ну и, из определения веб-компонентов, фреймворконезависимая. И именно ей мы звание библиотеки дня и присуждаем. Интересный вариант для тех, кто хочет написать свой первый веб-компонент.
Есть поддержка медиазапросов, есть — контейнерных.
Впрочем, я в любом случае предпочту предложенный мной в предыдущем посте вариант. Но я же не один на свете.
#css #table #adaptive
Ладно, раз уж подняли тему адаптивных таблиц, есть ещё большое количество применимых техник.
Один из наиболее полных сборников таких техник, это jQuery-плагин https://github.com/filamentgroup/tablesaw
1. Stack aka "вытягивание" таблиц в колонку.
2. Отображение только выбранных колонок
3. "Карусель" по колонкам, которые помещаются в экран.
Ну и в качестве бонуса, сортировка и "карта" отображаемых колонок, чтобы хоть как-то сориентироваться по ним.
Этот плагин официально неактивен с 2018 года, хоть и всё ещё работает. Это же веб, камон.
Но создатели вдохновили автора веб-компонента table-saw на свою реализацию stack-режима: https://github.com/zachleat/table-saw
И вот эта штука уже очень интересная и современная Ну и, из определения веб-компонентов, фреймворконезависимая. И именно ей мы звание библиотеки дня и присуждаем. Интересный вариант для тех, кто хочет написать свой первый веб-компонент.
Есть поддержка медиазапросов, есть — контейнерных.
Впрочем, я в любом случае предпочту предложенный мной в предыдущем посте вариант. Но я же не один на свете.
#css #table #adaptive
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Поскольку селектор has почти прилетел во все браузеры (Firefox 121 вот-вот выйдет), самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://t.me/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.
Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.
По-моему, это решение ну в разы приятнее высоких псевдоэлементов.
Как вам, котаны?
#css #has #table
Поскольку селектор has почти прилетел во все браузеры (Firefox 121 вот-вот выйдет), самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://t.me/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
table:has(td:nth-child(5):hover) {
td:nth-child(5) {
background: var(--hover);
}
}
Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.
Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.
По-моему, это решение ну в разы приятнее высоких псевдоэлементов.
Как вам, котаны?
#css #has #table
👍33❤4🤩2
#инструмент дня
Есть категория инструментов, наиболее сильные в тех средах, которые все кругом ненавидят.
Это всяческого рода таблицы с CRUD- (Create-Read-Update-Delete) возможностями.
Несложно догадаться, что наиболее прокачаны они в разного рода энтерпрайз-фреймворках (на Java и C#), под общим названием GridView, в Sencha Ext JS и... в том же 1С.
Ну ещё бы бухгалтерская платформа не умела в таблицы.
Для веба их в целом огромное количество, но многие из них, как тот же Ext JS, разрабатывались последние лет 20, выросли в огромных слабо поддерживаемых монстров. Казалось бы, ну уж за столько времени можно написать что-то гибкое и универсальное? Да не особо. И ещё денег просят.
К счастью, прогресс не стоит на месте и у нас уже есть несколько прекрасных гридов. Одним из самых крутых, несомненно, является универсальный TanStack Table (бывший React Table): https://tanstack.com/table/v8
Его кайф в том, что он предоставляет все необходимые базовые компоненты, хуки и классы под разные фреймворки, а вам остаётся собрать всё это в рабочий грид.
И пример такого рабочего грида мне на днях прислал подписчик: Material React Table.
Ссылка: https://www.material-react-table.com/
Как раз пару месяцев назад у них вышел новый релиз.
Если TanStack Query оставляет выбор UI-кита за вами, то MRT, как несложно догадаться, берёт за основу MUI (Material UI до версии 5) и добивает плюшками и полновесными примерами.
Отличная документация, готовый код прямо на главной странице. Имеется сравнение с конкурентами (куда ж без этого).
В общем, рекомендуем, котаны :)
#js #table #crud #grid
Есть категория инструментов, наиболее сильные в тех средах, которые все кругом ненавидят.
Это всяческого рода таблицы с CRUD- (Create-Read-Update-Delete) возможностями.
Несложно догадаться, что наиболее прокачаны они в разного рода энтерпрайз-фреймворках (на Java и C#), под общим названием GridView, в Sencha Ext JS и... в том же 1С.
Ну ещё бы бухгалтерская платформа не умела в таблицы.
Для веба их в целом огромное количество, но многие из них, как тот же Ext JS, разрабатывались последние лет 20, выросли в огромных слабо поддерживаемых монстров. Казалось бы, ну уж за столько времени можно написать что-то гибкое и универсальное? Да не особо. И ещё денег просят.
К счастью, прогресс не стоит на месте и у нас уже есть несколько прекрасных гридов. Одним из самых крутых, несомненно, является универсальный TanStack Table (бывший React Table): https://tanstack.com/table/v8
Его кайф в том, что он предоставляет все необходимые базовые компоненты, хуки и классы под разные фреймворки, а вам остаётся собрать всё это в рабочий грид.
И пример такого рабочего грида мне на днях прислал подписчик: Material React Table.
Ссылка: https://www.material-react-table.com/
Как раз пару месяцев назад у них вышел новый релиз.
Если TanStack Query оставляет выбор UI-кита за вами, то MRT, как несложно догадаться, берёт за основу MUI (Material UI до версии 5) и добивает плюшками и полновесными примерами.
Отличная документация, готовый код прямо на главной странице. Имеется сравнение с конкурентами (куда ж без этого).
В общем, рекомендуем, котаны :)
#js #table #crud #grid
👍12❤2🤡1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://t.me/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.
Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.
По-моему, это решение ну в разы приятнее высоких псевдоэлементов.
Как вам, котаны?
#css #has #table #бородач
Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://t.me/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
table:has(td:nth-child(5):hover) {
td:nth-child(5) {
background: var(--hover);
}
}
Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.
Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.
По-моему, это решение ну в разы приятнее высоких псевдоэлементов.
Как вам, котаны?
#css #has #table #бородач
👍19❤4🤡2👎1
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
codepen.io
Proper a11y table
...
❤11
#статья дня
Прекрасный рефрешер знаний по таблицам от Мишель Баркер: https://piccalil.li/blog/styling-tables-the-modern-css-way/
Таблицы получили много незаслуженного хейта из-за лихих нулевых. Мобильные устройства тоже не добавили удобства, в итоге многие положили болт на семантику и начали верстать таблицы гридами. Во имя чего — непонятно.
А люди потом в эксель не могли ничего скопировать.
Но вместе с этим, ничего более универсального для двумерного представления данных пока не придумали, поэтому имеет смысл обновить знания по существующим фишкам и посмотреть, нет ли чего нового.
Статья хороша тем, что посвящена не трюкам, а просто сводит воедино базу по доступности и удобству. Да, sticky columns там тоже описываются.
Ну и тут уместно напомнить о моём тейке про доступные таблицы: https://t.me/htmlshit/2981
#css #table
Прекрасный рефрешер знаний по таблицам от Мишель Баркер: https://piccalil.li/blog/styling-tables-the-modern-css-way/
Таблицы получили много незаслуженного хейта из-за лихих нулевых. Мобильные устройства тоже не добавили удобства, в итоге многие положили болт на семантику и начали верстать таблицы гридами. Во имя чего — непонятно.
А люди потом в эксель не могли ничего скопировать.
Но вместе с этим, ничего более универсального для двумерного представления данных пока не придумали, поэтому имеет смысл обновить знания по существующим фишкам и посмотреть, нет ли чего нового.
Статья хороша тем, что посвящена не трюкам, а просто сводит воедино базу по доступности и удобству. Да, sticky columns там тоже описываются.
Ну и тут уместно напомнить о моём тейке про доступные таблицы: https://t.me/htmlshit/2981
#css #table
👍13
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Применяя
Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем
Обратите внимание,
Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100
#table #sticky #position
Применяя
position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем
margin-bottom на thead размером во всю высоту строки:
margin-bottom: calc(1lh + 20px);
Обратите внимание,
1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100
#table #sticky #position
👍51❤12