TGViewer
mefody.dev mefody.dev @mefody_dev · 5.38K subscribers
Post #22 1.51K
CSS Named Pages

Тут Firefox собирается выкатить крайне интересную мне фичу: возможность задавать именованные типы страниц в печатных стилях.

Один из первых моих докладов был про печатные стили. Ещё в университете задумался о том, что при помощи CSS можно вполне себе собрать небольшой фреймворк, чтобы оформлять дипломы и курсовые на связке Markdown + CSS. Ведь по сути в ГОСТ-ах прописаны правила оформления, которые вполне однозначно соотносятся с какими-то стилями. Но уже тогда понял, что многие описанные в спецификации вещи банально не реализованы в браузерах, да и с 2009 года на тот момент почти никаких подвижек не было.

И тут внезапно выясняется, что одна из интересных фичей всё-таки появилась в Chrome 85 и может появиться в ближайших релизах Firefox.

Так что за именованные страницы такие? Иногда есть необходимость задать определённые размеры или особенности каким-то страницам документа. Например, в дипломных работах для широких таблиц, графиков и изображений допустимо использовать горизонтальную ориентацию. Такие страницы обычно подшиваются в конце как список материалов. Или, например, вы хотите генерировать PDF-документ, в котором одновременно есть А4-билет на мероприятие и конверт для него другого размера. Или билеты в кино и чек к ним.

Вот как это будет выглядеть в CSS.

@page envelope { size: letter landscape; }
@page list { size: A4 portrait; }
.envelope {
page: envelope;
margin: 2in 3.5in;
}
.list { page: list; }


Браузер, когда наткнётся на новый тип страницы, который должен быть применён к элементу, сделает разрыв контента (page-break) и постарается уместить контент в новом размере при генерации печатной версии. После — снова разрыв страницы, за которым другой размер, если надо.

Того и гляди, нужно будет обновлять свой доклад, когда «новые» фичи доедут-таки до основных браузеров.

https://groups.google.com/a/mozilla.org/g/dev-platform/c/bazhFYQH6C8/m/cGi6AvR4AAAJ
YouTube Распечатай мне курсач. На CSS, Никита Дубко В некоторых университетах принято смотреть не на суть работы, а на то, как качественно она оформлена по ГОСТам. Почему бы не применить всю мощь CSS Paged Media Module и больше не думать над отступами? Никита Дубко на конференции Web Standards Days 3 февраля…
  • 🔥 8
  • 👍 3
  • 🎉 2
More from @mefody_dev
  1. Sep 28, 2026View Transitions Toolkit Брамус делится своей коллекцией утилит, чтобы можно было более уд…
  2. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  3. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  4. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  5. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  6. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →