iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性

苹果的 iPhone X 配备了一个覆盖整个手机的全屏幕,但是顶部保留了一个“凹槽”,为相机和其他各种组件腾出空间。结果是屏幕设计时有一些尴尬局面,例如将网站限制在“安全区域”,那么边缘会有白色空白条。想要移除这个白色空白条虽然不难,在 body 设置一个 background-color 就可以搞定。或者,你可以 viewport-fit=cover 添加到 meta viewport 标签上,以使网页填充满整个屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

然后,你要考虑到任何重叠的情况,通常是由安全区域处理的。有一些新的CSS可以帮助你适应这种情况。查看 Stephen Radford 的文档继续阅读

2017年最新的 <head> 元素指南

整理了一份关于可以写入到HTML 标签中的内容清单-2017年最新的 <head> 元素指南,主要内容来自 <head> cheatsheet ,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。

你也可以查看移动前端不得不了解的HTML5 head 头标签 继续阅读

10分钟学会基本的 Flexbox 布局

愚人码头注:本文在英文原文的基础上加了一些便于理解的注释和示例。

什么是 Flexbox ?

Flexbox 是 flexible box 的简称(愚人码头注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

  • 在不同方向排列元素
  • 重新排列元素的显示顺序
  • 更改元素的对齐方式
  • 动态地将元素装入容器

什么情况下不建议使用 Flexbox ?

虽然 Flexbox 非常适合缩放,对齐和重新排序元素,但以下情况应该尽量避免使用 Flexbox 布局: 继续阅读

2017年成为全栈开发工程师的权威指南

根据 2016年 Stack Overflow 开发者调查 显示,全栈开发工程师是当今最受欢迎的开发者职业。 毫无疑问,有许多在线和现场教学课程可以帮助你成为全栈开发工程师,甚至帮助这些新开发人员找到高薪编程开发工作。

国内外有很流行的在线课程,比如: LyndaUdacityCourseraThinkful全栈开发工程师远程就业班带你轻松搞定node.js从前端小工到 BAT 中高级工程师的必备技能Vue2.0全栈实战项目WEB前端开发零基础课程React 大神进阶 等等。

除了这些在线课程,还有许多 现场教学课程 正在教人们成为 Web 开发人员所需的技能。

在这篇文章中,我不会讨论哪些在线或现场教学课程比较好。相反,我将提供一份我认为当今要成为一个全栈开发工程师所需最重要技能的权威指南,如果你以前从未编写过代码的话,或许可以获得一份好工作。我会从三个方面列出成为一个全栈开发工程师所需的最重要技能: 继续阅读

2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库(TOP 9)

前端网页设计在过去的十年里经历了一场革命。在2007年,我们大多数人仍在设计静态杂志布局,在2017年,我们重新设计了数字机器,有成千上万的调整、协调、移动的部件。

简单的说,很好的UI设计师还需要成为很好的动画师 – 需要对网络动画技术有一个很好的理解。

这是我们指南中最新更新的,帮助你为每个任务选择正确的动画库。我们将通过 9 个免费的、编码良好的动画库,最适合于UI设计,它们的优点和缺点,以及何时选择它们。

请记住,我们是从一个熟悉代码的UI设计师(而不是从代精通代码的开发人员)的角度来看待每个库。这些库中有一些是纯 CSS 实现的。其他是JavaScript 的,但是,除了了解基本的 HTML/CSS 之外,使用他们你不需要更多的其他知识。链接一个动画库 – 添加一个 CSS 类 即可。
继续阅读

Sass入门教程

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。 继续阅读

更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释

上一篇文章我们入门了几个基本的 Flexbox 属性:flex-directionjustify-contentalign-itemsalign-self

这些属性对于创建基本布局非常有用。 但是一旦你开始使用Flexbox构建网页的时候,你需要更深入学习Flexbox 属性,以发挥它的潜力。

现在让我们深入了解 Flexbox 的缩放 – 以及如何利用它来构建漂亮的自适应布局。

属性 #1: Flex-Basis

在上一篇文章中,我们主要了解了适用于容器元素的属性。这一次,我们专门介绍如何控制子元素(flex项)的大小。 继续阅读

Flexbox布局是如何工作的 – 用大彩图和GIF动画解释

Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。

很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。

所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。

Flexbox 的基本原理是让布局变得灵活和直观。 继续阅读

降低样式计算的范围和复杂度

添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)。这就是所谓的样式计算。

TL;DR

  • 降低样式选择器的复杂度;使用基于class的方式,比如BEM。
  • 减少需要执行样式计算的元素的个数。

计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。

第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在DOM元素上的。在Blink(Chrome和Opera的渲染引擎)中,至少从现在来看,以上两步在时间消耗上是差不多的。 继续阅读

CSS3 Flexbox解决方案

1df97ee6-992d-4723-aa69-68730625dcc7

长期以来,CSS 一直缺乏合适的布局机制。 变形,动画,滤镜,对这门伟大的语言来说都很有用的补充的,但是都没有解决 Web 开发人员一直抱怨的的主要的看起来似乎是永恒的问题。

终于,感谢Flexbox ,我们有了一个解决方案。查看说明、DEMO及项目源代码:Flexbox解决方案

这个网站不是另一个CSS框架。相反,它的目的是展示曾经很困难甚至无法单独使用 CSS 能解决的问题,而现在使用Flexbox简单易用。随着最近发布的Internet Explorer 11和Safari 6.1,最新的Flexbox规格已经被每一个的现代浏览器支持(愚人码头注:浏览器的支持请客,你可以看 http://caniuse.com/#feat=flexbox)。 继续阅读