CSS - Ultramarine

Bootstrap 4 alpha 新特性介绍

昨日 Bootstrap 官方发布了 4-alpha 版本，该版本的主要变更如下：从 Less 迁移到 Sass。 Bootstrap 依靠 Libsass 拥有了前所未有的编译速度，我们也加入了蒸蒸日上的 Sass 开发者委员会。改进的网格系统。我们添加了一个新的网格层用于更好的支持移动设备，并全面检查我们的语义 mixin。可选的弹性盒子支持。未来近在咫尺——将一个布尔变量设为 true 之后重新编译 CSS 就可以体验到弹性盒布局的网格和组件的强大。 well、thumbnail

CSS

【未完成】常见中文 CSS 框架中对于 font-family 的配置总结

未完成，排名不分先后 Amaze UI font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei"

CSS

CSS 中 inline-block 两端对齐的解决方案

CSS 中实现两端对齐效果一般是采用 Flexbox 的方式解决，但是 Flexbox 的兼容性问题使得其在目前的前端领域应用性不高，但是实现两端对齐还有一个传统的 CSS 语法是text-align: justify。当我们对inline-block块所属的容器施加text-align: justify时，效果如下：可见text-align: justify方法可以让第一行实现两端对齐，但是不能控制第二行（最后一行）的对齐方式。解决这个问题要用一点小技巧，就是使用父块的::after伪元素强制作为父块的最后一行。这样就可以让第二行成为非最后一行，从而成功套用justify对齐方式。具体实现方式如下： ul::after { content: ''; display: inline-block; width: 100%; } 效果如下： Fiddle: PS. Internet Explorer 浏览器从 6 开始就有了text-align-last CSS 属性，用于控制最后一行的对齐方式，

CSS

CSS 中强制不换行和居中不并存的解决方案

当我们需要同时实现强制不换行和居中时，一般书写HTML和CSS如下： <div>Lorem ipsum dolor sit amet.</div> div { width: 100px; background-color: #CCC; text-align: center; white-space: nowrap; } 效果如下图所示，居中不起作用：查过 StackOverflow 之后得到解决方案如下： <div><p>Lorem ipsum dolor sit amet.</p></div>

浏览器

IE8 多背景兼容性BUG

在使用CSS3 Multi-background特性时，为了做到平稳退化，需要做一个单背景的退化版本，如下： background-image: url("assets/content-bg.png"); background-image: url("assets/content-bg.png"), -webkit-gradient(linear, left top, left bottom, from(#E5EDED), to(white), color-stop(0.1, white)); /* iOS */ background-image: url("assets/content-bg.png"), linear-gradient(to bottom,