CSS Grid 与表单实现电影院座位选位系统
之前碰到一道有趣的前端 UI 题，发现需要对于前端有较为全面的认知才有办法解出来，并且也可以针对感兴趣的领域延伸提出更更多问题，于是特地纪录一下我的思考解题过程。身为一名前端工程师，你会怎么实作上图的电影院座位选位系统？
之前碰到一道有趣的前端 UI 题，发现需要对于前端有较为全面的认知才有办法解出来，并且也可以针对感兴趣的领域延伸提出更更多问题，于是特地纪录一下我的思考解题过程。身为一名前端工程师，你会怎么实作上图的电影院座位选位系统？
为了确保页面内容保持在合理的范围内，很多时候会需要在外层使用固定的尺寸作为网页内容的容器。而近期在翻新的页面有一些独特的布局样式，透过 CSS Grid 来更灵活的让容器内容也能跳脱安排在各处，主要参考 Kevin Powell 的做法。
浏览器引擎前缀是为了让开发者在浏览器尚未正式支援的情况下先使用这些前缀来实现一些新的 CSS 特性，甚至当时还时常会使用 PostCSS 这类预处理器的 autoprefixer 插件来预处理 CSS 添加上这些前缀。近期发现需要前缀的属性越来越少，未来也大机率不会再有新的前缀被加入了。
一开始听到CSS Container Queries 这个名词还是在一两年前，随着时间演进建构网页的模式也变动了许多次，我也越来越确信这项技术会是未来建构 RWD 网页的一块重要拼图，文章将介绍现有的Media Queries 有哪些缺陷，新解方则具备哪些优势？
撰写这篇文章是因为接手过非常反人类的 Tailwind 项目，一些不应该出现的反模式其实都可以在早期被轻松避免，随着项目规模变大，这些反模式就会变成一个巨大的问题难以修正。本文将介绍一些我在项目中看到的反模式，并提醒你千万不要这样做！
我既设计网页也开发网页，并且在过去几年经验中总结发现设计与开发配合上容易遇到的问题像是：我需要绘制多少种尺寸的网页？我需要为网页设置多少个断点？这篇文章我分享自己作为设计者与开发者的经历以及你为何应该使用越少的断点来制作响应式网页越好。
赋予网页元素相对的关系而非绝对的数值，让我们强烈联系元素之间的差异，而非取决于某个魔法数字可以避免很多折腾。最近看到一篇文章，作者提到用 CSS Variable 来赋予相对而非绝对数值的 `z-index` 值，真是优雅简洁的方法！完美的发挥了 CSS 变量的优势，促使我写下这篇文章。
响应式网页内的内容像水一样，顺应着浏览器的尺寸(容器)自动填装，只要内容挤破容器就会产生x 轴，因此解决方法无疑就是「找出网页中超出浏览器宽度的元素」。这是大多数人困惑的地方「知道问题点，但是不知道怎么下手 🥺」。实际上这个问题的解决方法很简单，本篇文章提供提供两种解决方案。
唯有了解盒模型才能开始学习更多网页切版布局的技巧，本文由内至外拆解盒模型，并且解说相关的特性与属性。如果你对于网页有这么多间距可以被调整所困惑，或是初入门 CSS 我都非常推荐要先理解 CSS 的盒模型概念，网页其实就是一堆箱子组成的概念。
行动装置占了现代网际网路流量的一半以上，并且这样的趋势只会越来越高，随着行动装置的普及，像手表、手机、平板……等装置，连结上网页的装置只会越来越多元零碎，而每个装置又有不同的解析度与尺寸，因此市场对「能够适应各种装置」的网页需求是大大的增加，因此出现了 Responsive Web Design (RWD) 的做法。