标签: css-parsing

我正在创建一个CSS编辑器,我正在尝试创建一个可以从CSS文档中获取数据的正则表达式.如果我有一个属性但是我不能让它适用于所有属性,这个正则表达式是有效的.我在PHP中使用preg/perl语法.

正则表达式

(?<selector>[A-Za-z]+[\s]*)[\s]*{[\s]*((?<properties>[A-Za-z0-9-_]+)[\s]*:[\s]*(?<values>[A-Za-z0-9#, ]+);[\s]*)*[\s]*}

测试用例

body { background: #f00; font: 12px Arial; }

预期结果

Array(
    [0] => Array(
            [0] => body { background: #f00; font: 12px Arial; }
            [selector] => Array(
                [0] => body
            )
            [1] => Array(
                [0] => body
            )
            [2] => font: 12px Arial; 
            [properties] => Array(
                [0] => font
            )
            [3] => Array(
                [0] => font
            )
            [values] => Array(
                [0] => 12px Arial
                [1] => background: #f00
            )
            [4] => Array(
                [0] => 12px Arial …

我花了两个小时谷歌搜索这个,我找不到任何好的答案,所以让我们看看人类是否可以击败谷歌的电脑.

我想在Ruby中解析一个样式表,以便我可以将这些样式应用于我的文档中的元素(以使样式内联).所以,我想采取类似的东西

<style>
.mystyle {
  color:white;
}
</style>

并能够将其提取到某种Nokogiri对象中.

在引入nokogiri类"CSS ::分析器"(http://nokogiri.rubyforge.org/nokogiri/Nokogiri/CSS/Parser.html)肯定有前途的名字,但我找不到它是什么或如何任何文件它有效,所以我不知道它是否可以做我在这之后的事情.

我的最终目标是能够编写如下代码:

a_web_page = Nokogiri::HTML(html_page_as_string)
parsed_styles = Nokogiri::CSS.parse(html_page_as_string)
parsed_styles.each do |style| 
  existing_inlined_style = a_web_page.css(style.declaration) || ''
  a_web_page.css(style.declaration)['css'] = existing_inlined_style + style.definition
end

这将从样式表中提取样式,并将它们全部作为内联样式添加到我的文档中.

我正在尝试使用ANTLR解析CSS,或者至少是基础知识.我的lexer规则遇到了一些问题.问题在于ID选择器和十六进制颜色值之间的模糊性.为清晰起见,使用简化的语法,请考虑以下输入:

#bbb {
  color: #fff;
}

以及以下解析器规则:

ruleset : selector '{' property* '}';
selector: '#' ALPHANUM;
property: ALPHANUM ':' value ';' ;
value: COLOR;

和这些词法分析器:

ALPHANUM : ('a'..'z' | '0'..'9')+;
COLOR : '#' ('0'..'9' | 'a'..'f')+;

这不起作用,因为#bbb被标记为COLOR标记,即使它应该是一个选择器.如果我将选择器更改为不以十六进制字符开头,则它可以正常工作.我不知道如何解决这个问题.有没有办法让ANTLR将特定令牌仅作为COLOR令牌处理,如果它在某个位置？比方说,如果它属于属性规则,我可以放心地认为它是一个颜色标记.如果不是,请将其视为选择器.

任何帮助,将不胜感激!

解决方案:原来我试图在语法中做太多,我应该在使用AST的代码中处理.CSS有太多不明确的令牌可靠地分成不同的令牌,所以我现在使用的方法基本上是对'#','.',':'和花括号等特殊字符进行标记,并在消费者代码.工作得更好,处理边缘情况更容易.

解释问题:

所以,如果你有一个CSS规则看起来像这样:

h1, h1 a:hover {
  color: blue;
}

它的工作正常,从可用性的角度来看,这个例子可能是最好的,但它确实有效.(它可以证明这个问题...)

但是,如果您使用浏览器无法理解的逗号(,)分隔,则会忽略漏洞规则.

 h1, h1 a:hover, h1:focus-within {
    color: blue;
 }

浏览器不理解:focus-within伪类将忽略整个规则.这意味着即使是h1也不会得到指定的规则.

进一步想知道为什么它是这样的:

别误会我的意思.忽略他们不知道的东西是CSS中非常强大的功能!

但是为什么不是以一种只忽略未知部分并且所有其他选择器仍然按预期工作的方式设计的呢？

就个人而言,我很少偶然发现这个问题,而且我已经接受了这样一个事实:选择器中的一个错误的东西打破了整个规则.但很难解释为什么一个错误的声明或属性只导致特定的行被忽略,而选择器中未知的任何东西都会破坏整个块.

感觉我错过了什么,所以如果有一个很好的解释让我知道并感谢你这样做.

不满意的解决方案:

当然,解决方法是将选择器的"危险"部分分成新规则,如下所示:

h1, h1 a:hover {
    color: blue;
}
h1:focus-within {
    color: blue;
}

但那感觉很糟糕.(由于"不必要的"重复)

只是想把它放在这里.

我希望能够读取CSS文件,并能够将给定选择器的所有声明提取到字符串中.例如,给定以下样式表:

h1 {
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.item {
  font-size: 12px;
  border:1px solid #EEE;
}

我希望能够调用并获得div.item,例如:

$css->getSelector('div.item');

哪个应该给我一个字符串:

font-size:12px;border:1px solid #EEE;

我一直在寻找,但找不到可以做到这一点的解析器.有任何想法吗？

仅供参考:我需要能够从CSS转换选择器并将动态嵌入到电子邮件中的HTML元素中.

解决方案 编辑:我想出了自己的原始解决方案并创建了一个类来完成我想要的工作.请看下面我自己的答案.

#elem {
  -myCustom: 99;
}

要么

#elem {
  --myCustom: 99;
}

我在网上的例子中看到过以上两种情况.两者有什么区别？

尝试在JavaScript中访问自定义属性返回null ..

#elem {
-myCustom: 99;
}

<div id="elem">some text</div>

elem = document.getElementById("elem");
style= window.getComputedStyle(elem);
value = style.getPropertyValue('-myCustom');
alert(value);

我有一个带有以下 css 的字符串，我需要用 javascript 处理

h1
{
    color: red;
}

.info
{
    border: 1px dotted blue;
    padding: 10px;
}

#rect
{
    background: pink;
}

h2,
h3,
h4
{
    font-weight: bold;
}

table td:last td
{
    background: gainsboro;
}

如何.page为每个规则添加前缀以便 css 不会中断？

我想要这个结果

.page h1
{
    color: red;
}

.page .info
{
    border: 1px dotted blue;
    padding: 10px;
}

...

现在，我通过查找缩进来解决它，但是在这种情况下代码失败了

h1
{
color: red;
}

然后以

.page h1
{
.page color: red;
}

我也可以查找只有括号的行，但是这种情况会失败

h1 { color: red; …

有了这个CSS：

.foo { background-size: 10px 20px; }

还有这个 HTML：

<span class="foo"></span>

还有这个 C#：

var parser = new HtmlParser();
var doc = parser.Parse("http://localhost/test.html");
var element = doc.QuerySelector("span.foo");

如何获取与element相关的背景宽度和高度？

（目前我使用的是AngleSharp版本0.9.9）

我在想是否有可能获得网站的"特色"颜色.例如,TechCrunch将为绿色,ReadWriteWeb将为红色,CNN也为红色,Microsoft为蓝色,PHP为紫色等...

它不一定准确,只是最好的猜测.

我有些想法:

• 解析所有css规则并找到与大多数元素匹配的规则
• 解析所有css规则并找到具有最大尺寸的元素的背景颜色
• 获取body元素的背景图像并获得其主要颜色(对于图像来说这是可能的)
• 以某种方式找到网站的"标题"(DOM中的第一个元素,背景css属性设置？)并获得其背景

我还需要一种消除黑色,灰色和白色的方法.

这可行吗？你还有其他建议吗？

PS抱歉我的英文

根据w3schools,语法outline是:
outline: <color> <style> <width>;并且三个中的任何一个都可以丢失.

并且该值inherit是三个有效值,或者单个outline: inherit意味着它应该继承所有三个值.

我问这个是因为我正在研究CSS minifier的属性优化器.根据上面的链接,
outline: inherit none 3px相当于outline: inherit 3px,
outline: invert inherit 3px也相当于outline: inherit 3px,
但结果似乎太过暧昧.

所以问题是,浏览器如何解释outline: inherit 0px？他们分配inherit颜色还是风格？

我正在尝试使用OpenUri和Nokogiri从HTML源获取样式内容.

require 'open-uri'
require 'nokogiri'
require 'css_parser'

url  = open('https://google.com')
html = Nokogiri::HTML(url)
css  = CssParser::Parser.new
css.add_block!(html.search('style#gstyle').text)

这会返回nil,但Google页面的HTML包含id="gstyle".这是输出结果的图像:

1. 为什么此示例中的Google HTML页面与OpenUri返回的页面不同？
2. 我怎样才能找到这个标签style#gstyle？
3. 为什么Firebug会看到正确的HTML文档而OpenUri却没有？