qfile 从头开始_预览：元素查询，从头开始

qfile 从头开始

The following is a guest post by Daniel Buchner on something called Element Queries. If you don't know what that is, you're in for a treat!

以下是丹尼尔·布赫纳(Daniel Buchner)关于“元素查询”的主题文章。 如果您不知道那是什么，那您就可以大饱口福！

元素查询，它们是什么？ (Element Queries, what are they?)

Have you ever wanted to style an element using something like Media Queries, but based on *its own* dimensions instead of the browser's viewport? That's what Element Queries would provide. Having this ability would make responsive styling of layouts and components easier than ever before.

您是否曾经想过使用“媒体查询”之类的样式来设置元素的样式，但是基于*其自身*的尺寸而不是浏览器的视口？ 这就是元素查询所提供的。 具有此功能将使布局和组件的响应式样式比以往更容易。

我们对于它可以做些什么呢？ (What can we do about it?)

Over the last couple of weeks, I have been hacking on a way to provide this functionality using the browser tech we have today. After a ton of experimentation, I've found a solution that will give you untold styling powers of mythical proportion.

在过去的几周中，我一直在寻找一种使用我们今天使用的浏览器技术来提供此功能的方法。 经过大量的实验，我找到了一种解决方案，该解决方案将为您提供难以置信的神话般的样式。

Let's dig into an example:

让我们来看一个例子：

Imagine I have a section element that contains a ul. I want to style the list differently when the container becomes smaller than 300px. The HTML structure below is what this scenario would look like if the elements had already been parsed by the Element Query module:

想象一下，我有一个包含ul的section元素。 当容器小于300px时，我想对列表进行样式设置。 如果元素已经由Element Query模块解析，则下面HTML结构就是这种情况：

   
   


  
    
    
One
Two
Three

  
    
    


   
   

So what's that object element doing in there? How's that going to help with anything? The media="" attribute on the section element is how you declare your Element Query rules. There are two arguments for the media attribute's query() function syntax. The first is an identifying query name that will be added to the matched-media="" attribute when its corresponding CSSMediaRule is matched within the object sensor. As the user, all you need to worry about is adding queries to the media attribute, and styling based on the matched-media attribute, all the rest happens automatically.

那么那个object元素在那做什么呢？ 那对什么有什么帮助？ section元素上的media=""属性是声明元素查询规则的方式。 媒体属性的query()函数语法有两个参数。 第一个是标识查询名称，当其对应的CSSMediaRule在object传感器中匹配时，将添加到match matched-media=""属性中。 作为用户，您需要担心的就是向media属性添加查询，并根据matched-media属性进行样式设置，其余所有操作都会自动发生。

在CSS中使用元素查询 (Using Element Queries in CSS)

Once a query is matched, the name you gave the query will be added to the matched-media attribute. It's a space separated list, so if multiple are matched, you would use it in CSS just like other attributes of this sort - class="", for instance. Here's a post by Chris Coyier on all the ways you can style elements based on their attribute values: http://css-tricks.com/attribute-selectors/. Here's an example of what writing CSS against an Element Query match looks like, based on the HTML example content above:

匹配查询后，您给查询提供的名称将添加到matched-media属性中。 这是一个用空格分隔的列表，因此，如果匹配多个列表，则可以在CSS中使用它，就像这种其他属性-class class="" 。 这是Chris Coyier的帖子，内容涉及您可以根据元素的属性值设置元素样式的所有方法： http : //css-tricks.com/attribute-selectors/ 。 这是一个基于上面HTML示例内容的示例，显示了如何针对Element Query匹配编写CSS的示例：

section[matched-media~="small-width"] {
  font-size: 50%; /* small text for a wee lil element! */
}

/*** Example for styling multiple matches: ***/

section[matched-media~="small-width medium-height"] {
  ...
}

演示并阅读详细的帖子！ (Demo & Read the Detailed Post!)

I have a deep-dive post here on my blog if you are interested in using Element Queries or learning more about how it works: http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up

如果您有兴趣使用Element Queries或了解有关其工作原理的更多信息， 请访问我的博客，这里有一篇深入探讨的文章： http : //www.backalleycoder.com/2014/04/18/element-queries-from-the -脚

View Full Post 查看完整的帖子 View Demo 查看演示

Demo note: resize your browser window and click the shapes to trigger query break-points.

演示说明：调整浏览器窗口的大小，然后单击形状以触发查询断点。

翻译自: https://davidwalsh.name/preview-element-queries-feet

qfile 从头开始