Tag: css

CSS in JS

看了一些 CSS in JS 的内容,感觉目前还是大公司为了应付大项目特有的问题出现的权宜之计。倒不是说小项目不会遇到这些问题,而是这些问题在小项目中并没有让人难受到于要放弃 CSS 而选择 CSS in JS 的程度。

CSS in JS 在解决了一些问题的同时,也相对应的带来了其他问题,比如损失了 CSS 本身的一些优势。它相当于是用 JS 来优化一部分 CSS 组织管理上的缺陷,但是 CSS 的特性是非常多的,优化了这一部分,别的部分难免会顾不上。

我觉得未来更好的解决方案还是要依靠 CSS 和浏览器自身的进化,目前的 CSS in JS 还是大公司在为浏览器提前实现功能。就好比十几年前 Flash 为浏览器提前实现功能一样。CSS in JS 的思想、解决的问题应该会被 CSS 未来的发展逐步借鉴吸收。

iframe 中的横向打印的 CSS media query

通常 @media print and (orientation: landscape) 可以查询到横向打印,不过如果页面是在 iframe 中则 orientation 不起作用。

尝试了一下在 Chrome 下 A4 打印,宽度的 break point 大概在 842px 或 22.27cm,前提是 margin padding 都为 0 的情况。

这个 magic number 无疑是不稳定的,临时凑合用。

codepen demo

发现 codepen 的嵌入式 demo 是 iframe 套 iframe,还不起作用,得去codepen 上直接看才行。

update:
测了一下 Firefox 下是 1121px / 29.66cm,Edge 是 1122px / 29.69cm,基本接近 A4 的大小。

Copyright © 2024 yet Another

Theme by Anders NorenUp ↑