分类 笔记 下的文章

background: #4a87d8;
background:linear-gradient(-45deg, transparent 15px, #4a87d8 0) bottom right,

        linear-gradient(45deg, transparent 15px, #4a87d8 0) bottom left;

background-size: 20% 50%;
background-repeat: no-repeat;

at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。

常规规则

常规规则遵循下面的语法:

代码如下:
@[KEYWORD] (RULE);
@charset
这个规则定义了浏览器使用的字符集,如果样式表包含非ASCII characters (e.g:UTF-8)。注意,被放在HTTP头部的字符集将会覆盖@charset规则

代码如下:
@charset "UTF-8";
@import
这个规则指示请求样式表,在这一行,如果内容是正确的,就会引入一个外部的CSS文件。

代码如下:
@import 'global.css';
虽然流行的CSS预处理器都支持@import,但是应该指出的是,它们的工作原理不同于原生的CSS:预处理器会抓取CSS文件并将它们处理成一个CSS文件,对原生CSS,每一个@import都是一个独立的HTPP请求。
@namespace
对于将CSS应用在XML HTML(XHTML),这个规则是非常有用的,因为XHTML元素能在CSS中被作为一个选择器使用。

代码如下:
/ Namespace for XHTML /
@namespace url(http://www.w3.org/1999/xhtml);
/ Namespace for SVG embedded in XHTML /
@namespace svg url(http://www.w3.org/2000/svg);
嵌套规则

嵌套规则包含了额外的子集声明,其中一些声明只能用于特定情况。

代码如下:
@[KEYWORD] {
/ Nested Statements /
}
@document
这个规则为样式表指定了条件:只能应用于特定页面。举个粟子,我们提供一个URL,然后为这个特定的页面自定义样式,在其他页面中,这些样式会被忽略。

代码如下:
@document

/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
    /* Start styling */
    body { font-family: Comic Sans; }
}

@font-face
这个规则允许在web页面上加载自定义字体,对自定义字体有不同程度的支持,但是这个规则接受语句创建和提供这些字体。

代码如下:

@font-face {

font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');

}
@keyframes
在诸多CSS属性中,这个规则是关键帧 动画的基础,并允许我们标记动画开始和结束的标志。

代码如下:
@keyframes pulse {

0% {
    background-color: #001f3f;
}
100% {
    background-color: #ff4136;
}

}
@media
这个规则包含条件声明,可用于为特定屏幕指定样式,这些声明可以包含屏幕大小,在适屏样式中会很有用.

代码如下:
/ iPhone in Portrait and Landscape /
@media only screen

and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) 

{

.module { width: 100%; }

}
或者只在文档打印时运用样式

代码如下:
@media print {
}
@page
这个规则为将要打印的单独页面定义样式。特别的是,它能为页面伪元素设置外边距::first、:left和:right

代码如下:
@page :first {

margin: 1in;

}
@supports
这个规则可测试浏览器知否支持某个特性/功能,如果满足条件,将会为这些元素应用特定样式。有点像Modernizr,但确实是CSS属性。

代码如下:
/ Check one supported condition /
@supports (display: flex) {

.module { display: flex; }

}
/ Check multiple conditions /
@supports (display: flex)

and (-webkit-appearance: checkbox) {
.module { display: flex; }

}

总结

at-rule可以使CSS做一些疯狂有趣的事情。尽管文章中的示例很基础,但是可以看到,对于特定的条件,它们是如何使用样式的,从而创建匹配特定场景的用户体验和交互。

up

triangle-up {

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;

}

down

triangle-down {

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;

}

left

triangle-left {

width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;

}

right

triangle-right {

width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;

}

top-left

triangle-topleft {

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

}

top-right

triangle-topright {

width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent; 

}

bottom-left

triangle-bottomleft {

width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;

}

bottom-right

triangle-bottomright {

width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;

}

页面转载自:https://www.jb51.net/article/42513.htm

名称

开始时被叫做“CSS变量”
经过扩展和重构后,改为“CSS自定义属性”
CSS增加@apply规则后,名称变为“CSS自定义属性级联变量”
语法

1.定义语法:--variableName: value;

变量名称(variableName)使用规范:

以"--"开头,后面可以是数字、字母、下划线、连字符、汉字等,但不能包含$、[、^、(、%等字符
大小写敏感(另:CSS中,书写属性名时大小写不敏感,但是书写选择器时大小写敏感)
定义只能出现在块{}内
可以使用!important修饰
作用域就是选择器的选定范围,作用域出现交叉时,同名变量覆盖规则取决于选择器权重

.a{

 --container-bg-color: #0ff;

}
div {
--container-bg-color: #0f0 !important;
}

2.使用语法:cssPropertyName: var(--variableName[,declarationValue]);

declarationValue:仅限于当--variableName变量未定义时的备用选项
val()只能被引用,不能被赋值。即只能出现在":"右侧
不能用作地址,如:url(var(--url));
var()后面默认带有一个空格,因此在其后面加单位无效,如:
--size: 20; font-size: var(--size)px;

会解析成font-size: 20 px;注意此时“20”与“px”之间有个空格,导致该语句无效。单位应在定义时加上,如:

--size: 20px; font-size: val(--size);

检查浏览器支持

1.使用@supports方法

@supports ( (--size: 0)) {

/* 支持 */

}

@supports ( not (--size: 0)) {

/ 不支持 /

}

2.使用JavaScript

if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {

/ 支持 /

}else{

/ 不支持 /

}
使用JavaScript操作原生属性变量

window.getComputedStyle(element, '伪类'|null):[IE9+,Firefox,Chrome,Safari, Opera]获得当前元素最终使用的所有CSS属性值,返回一个只读CSS样式声明对象。
window.getComputedStyle(element, '伪类'|null).getPropertyValue('propertyName')
window.getComputedStyle(element, '伪类'|null).setProperty('propertyName', value)

var d1 = document.getElementById("d1"),
style1 = window.getComputedStyle(d1, ":after");

var d2 = document.getElementById("d2"),
style2 = window.getComputedStyle(d2, null);

var value = d1.getPropertyValue('--variableName');
本文转载自:https://www.cnblogs.com/bibibobo/p/6140659.html

prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕。

有了浏览器缓存,为何还需要预加载?
用户可能是第一次访问网站,此时还无缓存
用户可能清空了缓存
缓存可能已经过期,资源将重新加载
用户访问的缓存文件可能不是最新的,需要重新加载
Chrome 的预加载技术
现在的 chrome 聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了。
举个栗子,当你在搜索框输入 "amaz" 时,它猜测到你可能要访问 amazon.com,可能就帮你加载了这个网站的一些资源。
如果这个预测算法精准的话,就能大大地提高用户的浏览体验了。

DNS prefetch
我们知道,当我们访问一个网站如 www.amazon.com 时,需要将这个域名先转化为对应的 IP 地址,这是一个非常耗时的过程。

DNS prefetch 分析这个页面需要的资源所在的域名,浏览器空闲时提前将这些域名转化为 IP 地址,真正请求资源时就避免了上述这个过程的时间。






应用场景1:我们的资源存在在不同的 CDN 中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行 DNS-Prefetch,加强用户体验。

Resource prefetch
在 Chrome 下,我们可以用 link标签声明特定文件的预加载:



在 Firefox 中或用 meta 标签声明:

rel='subresource' 表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。

rel='prefetch' 表示当 subresource 所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。

注意:只有可缓存的资源才进行预加载,否则浪费资源!

Pre render
前面说到的预解析DNS、预加载资源已经够强悍了有木有,可还有更厉害的预渲染(Pre-rendering)!

预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!

在 Firefox 中或用 rel='next' 来声明

不是所有的资源都可以预加载
当资源为以下列表中的资源时,将阻止预渲染操作:

URL 中包含下载资源
页面中包含音频、视频
POST、PUT 和 DELETE 操作的 ajax 请求
HTTP 认证(Authentication)
HTTPS 页面
含恶意软件的页面
弹窗页面
占用资源很多的页面
打开了 chrome developer tools 开发工具
手动触发预渲染操作
在 head 中强势插入 link[rel='prerender'] 即可:

var hint =document.createElement("link")
hint.setAttribute(“rel”,”prerender”)
hint.setAttribute(“href”,”next-page.html”)
document.getElementsByTagName(“head”)[0].appendChild(hint)
兼容性
这么好用的特性,当然要考虑各浏览器的兼容程度了(哭:

IE9 支持 DNS pre-fetching 但管它叫 prefetch。

IE10+ 中 dns-prefetch 和 prefetch 是等价的。

其他方面的测试,目前还没有很好的方案,暂且只能通过查看浏览器是否缓存来测试。

在 Chrome 中打开了 chrome developer tools 开发工具会阻止页面的预渲染,所以我们看不到这个过程,但可以在 chrome://cache/ 或 chrome://net-internals/#prerender 中查看。

Firefox 可以在 about:cache 中查看。

作者:赖小赖小赖
链接:https://www.jianshu.com/p/7f58ddfc1392
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。