CSS魔法 – Web标准与前端技术杂谈 – CSSMagic.net
百姓网前端架构师；《CSS 揭秘》译者；不定期免费送书。 // 更多精彩请关注微信公众号 “CSS魔法”
本站涉及 HTML/CSS/JS 等网页制作技术，遵循 Web 标准，力推 CSS 布局与网站重构，关注网页的可用性/可访问性/用户体验。
在过去几年，本站主要整理并发布一些有价值的 CSS 面试题/练习题和演示，以及制作一些对应的 CSS 教程。最近一两年主要把精力放在博客的写作上，同时也在编写和翻译技术书籍。
CSS魔法的GitHub
- CSS-Secrets · 1399 人关注《CSS 揭秘》这本书的大本营
- blog · 1709 人关注CSS魔法 - 博客
- ChangeLog · 12 人关注Keep up with frequently updated projects.
- stylus-playgroundJavaScript · 11 人关注Stylus environment for practice and testing.
- Programming-JavaScript-Applications · 8 人关注《JavaScript 应用程序设计》非官方翻译
- better-dollarJavaScript · 5 人关注Smart wrapper for jQuery's `$()` function.
- actionJavaScript · 83 人关注Easy and lazy solution for click-event-binding.
- TimeLimit · 0 人关注A Timer to prompt lecturer.
- gulp-docs-zh-cn · 1 人关注gulp docs in Chinese
- Oh-My-MacDownCSS · 61 人关注MacDown's editor themes, preview themes, etc.
- jedi.xmlJavaScript · 1 人关注Jedi file-type-config for JetBrains' web IDEs.
- DefinitelyTypedTypeScript · 0 人关注The repository for high quality TypeScript type definitions.
- oh-my-zshShell · 1 人关注A community-driven framework for managing your zsh configuration. Includes 120+ optional plugins (rails, git, OSX, hub, capistrano, brew, ant, macports, etc), over 120 themes to spice up your morning, and an auto-update tool so that makes it easy to keep up with the latest updates from the community.
- brushCSS · 1 人关注Utility extensions for Stylus.
- gulpfilesJavaScript · 0 人关注Frequently used Gulp tasks.
- gulp-stream-to-promiseJavaScript · 2 人关注Convert gulp stream to promise.
- zeroCSS · 0 人关注HTML5 CSS reset in Stylus.
- CMUICSS · 0 人关注Lightweight UI solution for mobile web.
- CMUI-demoHTML · 0 人关注CMUI's demo site.
- gearboxJavaScript · 1 人关注Lightweight JavaScript utilities for mobile web, based on Underscore and Zepto.
- markdown-hereJavaScript · 0 人关注Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending.
- stylintCSS · 0 人关注Improve your Stylus code with Stylint
- blog-old · 0 人关注CSS魔法 - 老博客存档
- memo · 6 人关注前端工程师的烂笔头。快快收藏，有备无患！
- sampleJavaScript · 25 人关注File templates for front-end projects.
- history.stateJavaScript · 19 人关注Polyfill `history.state` on iOS 5- and Android 4.3-.
- subviewJavaScript · 2 人关注View switching with history support.
- underscore-templateJavaScript · 12 人关注More APIs for Underscore's template engine.
- Oh-My-GitHubJavaScript · 1 人关注[UserScript] Make GitHub even better.
- es6-promiseJavaScript · 0 人关注A polyfill for ES6-style Promises
CSS魔法的微博
- CSS魔法：转发了johnhax的微博：#BXT# BXT活动又来啦！今天晚上7点，前全民直播CTO张云龙分享他的技术人生——《绝知此事要躬行》。这次是首次在我们搬家后的新办公室举办！小伙伴赶紧报名！网页链接 转发理由：[憧憬] 期待云龙大神的分享！上海的小伙伴快来报名吧！ 2018-10-17
- CSS魔法：转发了CSS魔法的微博：【正准备买 QCon 门票？慢着！】QCon 上海站将在 2018.10.18～20 举办，魔法哥也将作为讲师出席此次技术盛会。// 如你正准备订票，千万不要错过折扣！在购票页面输入优惠码 `cssmagic` 即可享受八折优惠！// 详细了解大会日程点这里：网页链接 // 附前端会场海报： 转发理由：大会即将揭幕，大家都买票了吗？魔法哥的演讲名为《为什么前端工程师更应该掌握区块链 DApp 开发》，本周六下午第二场，不见不散哦！ 详情：网页链接 2018-10-16
- CSS魔法：为什么在这张海报里能看到自己（还不止一个）？ 这一定是有什么误会 [允悲] 2018-10-15
![为什么在这张海报里能看到自己（还不止一个）？ 这一定是有什么误会 [允悲] ](https://image.baidu.com/search/down?url=http://ww4.sinaimg.cn/bmiddle/620d0876gy1fw952vtd7rj20ku17adiw.jpg)
- CSS魔法：转发了NexTong的微博：看到一段书摘，觉得很有道理，分享一下:人人都有逻辑能力，但逻辑水平可以提高。逻辑学教学应该有助于逻辑知识的普及。不过，拥有逻辑知识并不能保证有效地应用。我见过一些逻辑学博士，惊讶地发现，他们熟知逻辑定式和推导技术，但似乎只在进行抽象符号演算时才显示出思维的逻辑性，而在思考其他问 转发理由：《怪诞行为学》[笑cry]//@Vinni-Wong :说得好 2018-10-02
- CSS魔法：转发了CSS魔法的微博：Chrome 69 似乎有个 bug，导致 “Markdown Here” 扩展无法获取 iframe 里的文本选区，从而失效。我得想办法降级，并且关闭 Chrome 恶心的自动升级机制。[摊手] 转发理由：为什么说 Chrome 的自动升级机制很恶心？因为它是强制的 [摊手]。还好我在这里（ 网页链接 ）找到了旧版 Chrome 的安装文件，按这里（ 网页链接 ）的方法成功禁用了 Chrome 的自动升级。终于又可以开心地玩耍啦 [doge] 2018-09-27
- CSS魔法：【正准备买 QCon 门票？慢着！】QCon 上海站将在 2018.10.18～20 举办，魔法哥也将作为讲师出席此次技术盛会。// 如你正准备订票，千万不要错过折扣！在购票页面输入优惠码 `cssmagic` 即可享受八折优惠！// 详细了解大会日程点这里：网页链接 // 附前端会场海报： 2018-09-27
- CSS魔法：Chrome 69 似乎有个 bug，导致 “Markdown Here” 扩展无法获取 iframe 里的文本选区，从而失效。我得想办法降级，并且关闭 Chrome 恶心的自动升级机制。[摊手] 2018-09-26
- CSS魔法：转发了今天锤科成了吗的微博：畅呼吸空气净化器，在招商的掌上生活里卖1399，还是三期免息。买了俩，巨划算了[doge] @朱海舟 @奥拉猪汪 @锤友 @DRZA @董晓龙 @搞科技 @贾伯斯龙 @硬哥 @袁炫华 转发理由： 哇……确实划算！ 2018-09-18
- CSS魔法：【公.众.号.新文章】《如何改善既有 JS 代码：修复常见的 ESLint 报警（四）》：ESLint 是目前最流行最强大的 JS 代码校验工具……这个系列写了大半年了，终于把坑填完 [允悲]……接下来就专心写区块链 DApp 教程啦 （微.信.扫.码.阅读全文） 2018-09-14
![【公.众.号.新文章】《如何改善既有 JS 代码：修复常见的 ESLint 报警（四）》：ESLint 是目前最流行最强大的 JS 代码校验工具……这个系列写了大半年了，终于把坑填完 [允悲]……接下来就专心写区块链 DApp 教程啦 （微.信.扫.码.阅读全文） ](https://image.baidu.com/search/down?url=http://ww4.sinaimg.cn/bmiddle/620d0876ly1fv8zl2oq08j20zk0npn1x.jpg)
- CSS魔法：转发了CSS魔法的微博：“磨刀不误砍柴工”，编辑器这事儿值得投入。身边的小伙伴纷纷换上 VS Code，我也打算试试。正好有一位专业老师来讲课，推荐大家一起来学学。（据说这两天有活动：扫图中二维码购课，我和你都可以获返现 [笑而不语]） 转发理由：据我观察，很多同学只是浅浅地用一些表面功能。吃饭的工具还是值得花时间学一学的，不亏。//@freeTaoyong: 这个用不就行吗，还有必要学吗？ 2018-09-12
![转发了CSS魔法的微博：“磨刀不误砍柴工”，编辑器这事儿值得投入。身边的小伙伴纷纷换上 VS Code，我也打算试试。正好有一位专业老师来讲课，推荐大家一起来学学。（据说这两天有活动：扫图中二维码购课，我和你都可以获返现 [笑而不语]） 转发理由：据我观察，很多同学只是浅浅地用一些表面功能。吃饭的工具还是值得花时间学一学的，不亏。//@freeTaoyong: 这个用不就行吗，还有必要学吗？](https://image.baidu.com/search/down?url=http://ww4.sinaimg.cn/bmiddle/620d0876ly1fv6li39mzrj20yi1pd0yf.jpg)
- CSS魔法：“磨刀不误砍柴工”，编辑器这事儿值得投入。身边的小伙伴纷纷换上 VS Code，我也打算试试。正好有一位专业老师来讲课，推荐大家一起来学学。（据说这两天有活动：扫图中二维码购课，我和你都可以获返现 [笑而不语]） 2018-09-12
- CSS魔法：转发了CSS魔法的微博：帮几位朋友招前端，想换工作的小伙伴看过来！本期的三个职位有两个都是区块链相关的，行业趋势大家体会一下。区块链行业发展迅猛，不缺钱，但缺人；而理解这个行业的人又非常少，进一步导致严重缺人！ // 工作地点都在上海，点此了解： 网页链接 转发理由：这几个职位都有推荐奖金。这跟你也是有关系的：你入职，魔法哥跟你平分推荐奖金！ 2018-09-06
- CSS魔法：转发了科技醒醒的微博：老罗最近忙子弹短信的事，出新书了也不知道宣传一下[doge][doge]@罗永浩 转发理由：估计是《长谈》的文字版。那我已经看过长谈了，还买吗？买呀！//@罗永浩:啊？！我出新书了？好，强烈推荐 2018-09-05
![转发了科技醒醒的微博：老罗最近忙子弹短信的事，出新书了也不知道宣传一下[doge][doge]@罗永浩 转发理由：估计是《长谈》的文字版。那我已经看过长谈了，还买吗？买呀！//@罗永浩:啊？！我出新书了？好，强烈推荐](https://image.baidu.com/search/down?url=http://ww4.sinaimg.cn/bmiddle/c8f5a874ly1fuxsmitxxej20u00y6ti3.jpg)
- CSS魔法：转发了CSS魔法的微博：帮几位朋友招前端，想换工作的小伙伴看过来！本期的三个职位有两个都是区块链相关的，行业趋势大家体会一下。区块链行业发展迅猛，不缺钱，但缺人；而理解这个行业的人又非常少，进一步导致严重缺人！ // 工作地点都在上海，点此了解： 网页链接 转发理由：也可以通过微博私信把简历发给我 [机智] 2018-09-05
![转发了CSS魔法的微博：帮几位朋友招前端，想换工作的小伙伴看过来！本期的三个职位有两个都是区块链相关的，行业趋势大家体会一下。区块链行业发展迅猛，不缺钱，但缺人；而理解这个行业的人又非常少，进一步导致严重缺人！ // 工作地点都在上海，点此了解： http://t.cn/RFrEAE0 转发理由：也可以通过微博私信把简历发给我 [机智]](https://image.baidu.com/search/down?url=http://ww4.sinaimg.cn/bmiddle/620d0876ly1fuxe3ac1zhj20m80m8743.jpg)
- CSS魔法：帮几位朋友招前端，想换工作的小伙伴看过来！本期的三个职位有两个都是区块链相关的，行业趋势大家体会一下。区块链行业发展迅猛，不缺钱，但缺人；而理解这个行业的人又非常少，进一步导致严重缺人！ // 工作地点都在上海，点此了解： 网页链接 2018-09-04