css3基础知识清单_我CSS愿望清单

css3基础知识清单

Although CSS is a great formatting tool, the styling language has a long way to go to keep Web Developers satisfied. There are some definite holes in CSS that need to be filled. Until we get what I propose below, JavaScript can help fill some of the holes and so can images, but CSS should eventually incorporate my requests.

尽管CSS是一种出色的格式化工具，但要使Web开发人员满意，样式语言还有很长的路要走。 CSS中有一些明确的漏洞需要填补。 直到我们在下面提出我的建议之前，JavaScript可以帮助填补一些空白，图像也可以帮助填补空白，但是CSS最终应该合并我的请求。

变数 (Variables)

Variables are an absolute necessity in most other languages, yet CSS doesn't have variable capability. At this point, we're stuck with typing '#ffffea1' numerous times in our stylesheet. Being a PHP enthusiast, I think the '$' sign would be perfect for CSS variables.

在大多数其他语言中，变量是绝对必要的，但是CSS没有变量功能。 此时，我们不得不在样式表中多次键入“＃ffffea1”。 作为PHP爱好者，我认为'$'符号对于CSS变量将是完美的选择。

@vars
{
	$white:#fff;
	$base:#000;
	$back:url(/graphics/background.jpg) top left no-repeat;
	$font:Helvetica;
}

/* and used like */

.my-div      { background:$back; color:$base; font-family:$font; border:1px solid $white; }

导入自定义字体 (Importing Custom Fonts)

Fonts are extremely lacking on the web. We're stuck with a core list of fonts and risk our website looking horrendous if we take the chance at using a font not supported/included in our visitors' computers. I propose the following syntax for importing custom fonts into our stylesheet.

网络上非常缺少字体。 如果我们有机会使用访客计算机中不支持/未包含的字体，那么我们将停留在字体的核心列表中，并冒着使我们的网站看起来恐怖的风险。 我建议使用以下语法将自定义字体导入样式表。

@font
{
	family: 'MyFont'
	src:url(fonts/myfont.ext);
}

可调整大小的元素 (Resizable Elements)

Resizables can now be accomplished using any of the popular JavaScript frameworks, but why not allow for resizable elements in CSS? We do use CSS units (ems, exs, etc.) that allow for scaling websites, but why not trigger resizing on demand? I think resizing should be as easy as:

现在，可以使用任何流行JavaScript框架来实现可调整大小的功能，但是为什么不允许CSS中的可调整大小的元素呢？ 我们确实使用CSS单元(ems，exs等)来扩展网站，但是为什么不按需触发调整大小？ 我认为调整大小应该很容易：

.my-element
{
	resizable:x; /* or */
	resizable:y; /* or */
	resizable:xy;
}

多个背景图片 (Multiple Background Images)

We all use "wrapper" DIVs and other elements to overlap background images -- why not just allow us to do it all in one CSS statement? Multiple background image specs are in the current CSS3 plans, but that still means we're years away from being able to rely on a browser having this capability.

我们都使用“包装器” DIV和其他元素来重叠背景图像-为什么不只允许我们在一个CSS语句中完成所有操作？ 当前CSS3计划中有多个背景图片规范，但这仍然意味着我们距离依赖具有此功能的浏览器还有很长的路要走。

最小和最大字体大小 (Minimum and Maximum Font Sizes)

We do our best to make our websites flexible and accessible, but there should be a point where we can tell the browser that the website simply can't/shouldn't be viewed with a font larger or smaller than x.

我们尽最大努力使我们的网站具有灵活性和可访问性，但是应该指出一点，我们可以告诉浏览器，不能/不应该使用大于或小于x的字体来浏览该网站。

min-font-size:.7em;
max-font-size:6em;

I believe the above items would push CSS into a new stage of maturity and usefulness. What would you like to see in CSS?

我相信以上各项将使CSS进入成熟和有用的新阶段。 您想在CSS中看到什么？

翻译自: https://davidwalsh.name/css-wishlist-css-variables-fonts

css3基础知识清单