Я потратил немало времени на то, чтобы разобраться с этим и попытаться создать базовый набор HTML и CSS, который я мог бы просто вставить куда угодно и быть нативным. Это также означало, что я должен был принять некоторые технические решения и компромиссы, которые могут укусить меня в будущем.
HTML
Сортировка HTML была, пожалуй, самой легкой частью для меня. Кости — это заголовки и абзацы в контейнерах. В основном.
Сначала я обертываю все это в
потому что я ожидаю, что мои бессмысленные одноразовые диаграммы Венна — это то, что я, возможно, захочу объединить или использовать повторно в различных контекстах. Это также требует заголовка, который я установил как
потому что в большинстве случаев синдицирующая страница будет (должна?) Иметь
своего собственного. Все остальные разделы обозначены
Каждый круг будет сгенерирован из
который не придает никакого значения содержанию. И не должно это. Мне также нужен элемент для фигур CSS, чтобы включить перенос текста так, как я хочу. В то время как я мог использовать сгенерированные контейнеры из :: before и :: after это лишает возможности создавать специальные новые стили для уникальных случаев в будущем. Поэтому вместо этого я использую два с. Я делаю это вместо
s, потому что они ни к чему не сводятся, когда не применяются стили.
Фондовая модель
Один
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit.
CSS Shapes
То, что действительно делает эту работу, — это поддержка форм CSS, рекомендация кандидата от W3C 2014 года. Сегодня формы CSS поддерживаются во всех основных браузерах, кроме Microsoft Edge. Разработчики просят поддержки в Edge с 2014 года, но пока она только рассматривается.
Когда вы пишете свои CSS-формы, вы можете обнаружить, что синтаксис немного сложен для ручного кодирования чего-либо, кроме прямоугольника или круга. Для диаграммы Венна у меня есть углы, которые я не могу легко нанести на точки.
Именно здесь редактор форм Firefox оказался спасителем жизни. Он не только покажет вам, какая точка на карте соответствует каким значениям в синтаксисе, но также позволит вам перетаскивать их или вводить собственные значения. Это также означало, что мне было легко использовать их повторно, просто выполняя некоторые математические операции по обновлению зеркальных значений по фигурам.
Инструменты разработчика Firefox имеют встроенный редактор форм. На этих снимках экрана показаны два прямоугольника, которые создают ограничивающую область, которая перекрывает круги один и два. Каждый снимок экрана показывает одну из точек, выделенных при наведении курсора мыши на соответствующие координаты в редакторе. Фон веб-страницы серый, потому что я установил его в Firefox по умолчанию.
Вы можете заметить, что формы CSS не идут прямо по краям контейнеров и линий. Это намеренно. Я хотел немного контролировать расстояние от краев в разных точках фигуры. Свойство shape-margin принимает только одно значение, поэтому вы не можете установить верхнюю часть, отличную от левого края, как вы можете с помощью margin или padding .
Следует также отметить, что использование форм CSS приведет к большему обрезанию текста, чем просто сам контейнер фиксированного размера. Если вы используете код как есть, вам также нужно будет использовать текст, который поместится в эти пробелы. Не забудьте протестировать с выбранным шрифтом и настройками шрифта.
На рисунке выше и на рисунке ниже показаны прямоугольники. Вы можете видеть, что отображаются через их ограничивающие рамки в виде серых областей в каждом круге с пунктирными границами. Вы заметите небольшой вертикальный разрыв между каждым. Если ограничивающие рамки перекрываются, текст будет помещен под ними обоими. Я оставляю пропасть как подушку, уверенная, что в моем контенте не будет ни крошечного ведущего, ни конечного «я».
Пользовательские свойства CSS
Я хотел, чтобы моя диаграмма Венна имела размеры в зависимости от области просмотра, а не от макета страницы. Я думаю, что будет больше шансов, что текст будет достаточно большим, чтобы его можно было прочитать. Хотя это может и не быть идеальным долгосрочным подходом, мне пришлось, по крайней мере, устранить непосредственное ограничение — встраивать его в макеты не полной ширины.
Я добавил пользовательское свойство CSS, которое в основном просто действует как множитель к базовому размеру. Если макет, в котором я хочу использовать диаграмму Венна, имеет максимальную ширину 90% области просмотра, тогда я настраиваю - venn-width-mult на значение 0,9 .
Я использую сетку CSS на рабочих сайтах с 2016 года. Делать это постепенно и поддерживать синтаксис сетки Internet Explorer для меня было относительно легко. Тем не менее, это означало, что я был ограничен в том, как далеко я мог толкнуть сетку.
Мое использование форм CSS немного изменило это исчисление для меня. Ни Internet Explorer, ни Edge не поддерживают формы CSS. Отсутствие поддержки означало, что я не мог легко предотвратить попадание текста в перекрывающиеся области — по крайней мере, без множества дополнительных элементов и хитрости.
Поскольку мое желание использовать сетку зависит от поддержки форм CSS, это позволило мне использовать другой запрос поддержки. Это также означало, что я мог бы использовать более современный синтаксис, чем в противном случае.
Я надеюсь, что когда браузеры добавят поддержку форм CSS, они также уже будут поддерживать этот синтаксис сетки.
С этой обработкой я мог бы создать сетку, которая учитывала бы наложения. В этом случае я сделал шесть столбцов, три строки сетки. Конечно, вы можете настроить количество столбцов / строк в соответствии со своими потребностями.
В Codepen выше вы должны увидеть вторую диаграмму Венна внизу. Каждый из
имеет цветной контур, причем
s представляют перекрывающиеся области, настроенные на смешанный цвет, соответствующий двум
с целью присоединения.
Fallbacks
Для браузеров, которые не поддерживают формы CSS, вместо макета сетки они получают плавающий контент. Я использую интервалы и закругленные углы, чтобы попытаться визуально показать, как соединяются соединенные области, но здесь я действительно полагаюсь на заголовки в каждом контейнере для выполнения этого тяжелого подъема. Обратите внимание, что эти значения не заданы в запросе @supports .
Для этих же браузеров в более узком представлении поплавки уходят через медиазапросы ширины. В этот момент все просто складывается, границы исчезают, и пользователи увидят, что по сути является исходной структурой страницы. С этой точки зрения ясность языка заголовков еще более важна, чтобы помочь пользователю понять, что есть что.
В обоих этих резервных представлениях нет ничего обрезанного. Отображаются все заголовки и отображается весь контент. Если по какой-либо причине у вас был контент в полном макете, который вы рассчитывали обрезать по фигурам, он будет виден здесь.
Доступность
По умолчанию он доступен для программ чтения с экрана. Он использует обычный синтаксис заголовка и текст, так что ничего особенного там нет. Исходный порядок имеет смысл при условии, что ваши заголовки также ясны. Размер текста и контрастность — это ваша ответственность при настройке.
Стили печати
Базовая версия имеет только один стиль печати. Это сделано для того, чтобы убедиться, что оно масштабируется, чтобы вместить как можно больше бумаги. Вы можете, конечно, переопределить это. Если вы используете цвета фона, будьте осторожны, чтобы очистить их.
@media print {
: root {
--venn-width-mult: 1;
}
}
Режим высокой контрастности Windows
Вам нечего здесь делать. Internet Explorer и Edge — единственные браузеры, которые хорошо поддерживают режим высокой контрастности Windows (WHCM). Firefox делает, но по опыту у него очень мало пользователей, и они знают о различиях в поддержке. Хорошей новостью является то, что и Edge, и IE получат версию с плавающей рамкой, а границы будут хорошо отображаться. Вам ничего не нужно делать. По крайней мере, пока вы не начнете настраивать его.
Два круга Венна
Возможно, вы заметили, что моя диаграмма Венна использует три круга. Многие из них — два круга (как только вы доберетесь до четырех и выше, вы просто возитесь с высшими планами реальности, так что забудьте о них).
Если вам нужна двухмерная диаграмма Венна, используйте код и методы, которые я описал выше, и дайте мне знать, когда вы ее построите.
Обновление
Хорошо. Я сделал один.
См. Диаграмму CSS круглого пера 2 и диаграмму Венна вне фигуры Адриана Розелли (@aardrian) в CodePen.
Пример
Я взял свой оригинальный эксперимент Венна и перенес его содержание на эту новую версию.
Я добавил бонус наведения / фокусировки, поэтому обратите внимание на то, как я использовал сгенерированный CSS контент, а также обеспечьте поддержку программы чтения с экрана. Он имеет стили печати, ужасный фон, работает в WHCM и даже использует символ объединения, который программы чтения с экрана сообщают правильно.
См. Диаграмму рождественских традиций Венера Адриана Розелли (@aardrian) на CodePen.
Загрузка...
