如何使用 Perl 将文件中的 CSS 定义合并到内联样式属性中?

2023-12-20

许多电子邮件客户端不喜欢链接的 CSS 样式表,甚至不喜欢嵌入的 CSS 样式表。<style>标签,而是希望 CSS 在所有标记上作为样式属性内联显示。

  • BAD: <link rel=stylesheet type="text/css" href="/style.css">
  • BAD: <style type="text/css">...</style>
  • WORKS: <h1 style="margin: 0">...</h1>

然而,这种内联样式属性方法管理起来很麻烦。

我找到了适用于 Ruby 和 PHP 的工具,它们将 CSS 文件和一些单独的标记作为输入,并返回合并的结果 - 单个标记文件,其中所有 CSS 都转换为样式属性。

我正在寻找解决此问题的 Perl 解决方案,但我在 CPAN 或搜索 Google 上都没有找到解决方案。有什么指点吗?或者,是否可以组合 CPAN 模块来实现相同的结果?

  • Ruby http://premailer.dialect.ca/ http://premailer.dialect.ca/
  • PHP http://www.pelagodesign.com/sidecar/emogrifier/ http://www.pelagodesign.com/sidecar/emogrifier/
  • Perl ?

我不知道有一个完整的、预先打包的解决方案。

CSS::DOM https://metacpan.org/pod/CSS::DOM's compute_style受到几乎相同的警告emogrifier多于。该模块与HTML::Toke解析器 https://metacpan.org/pod/HTML::TokeParser应该可以用来做饭。

Update:这是一个有问题的大杂烩:

#!/usr/bin/perl

use strict;
use warnings;

use CSS::DOM;
use File::Slurp;
use HTML::DOM;
use HTML::TokeParser;

die "convert html_file css_file" unless @ARGV == 2;
my ($html_file, $css_file) = @ARGV;

my $html_parser = HTML::TokeParser->new($html_file)
    or die "Cannot open '$html_file': $!";

my $sheet = CSS::DOM::parse( scalar read_file $css_file );

while ( my $token = $html_parser->get_token ) {
    my $type = $token->[0];
    my $text = $type eq 'T' ? $token->[1] : $token->[-1];
    if ( $type eq 'S' ) {
        unless ( skip( $token->[1] ) ) {
            $text = insert_computed_style($sheet, $token);
        }
    }
    print $text;
}

sub insert_computed_style {
    my ($sheet, $token) = @_;
    my ($tag, $attr, $attrseq) = @$token[1 .. 3];
    my $doc = HTML::DOM->new;

    my $element = $doc->createElement($tag);

    for my $attr_name ( @$attrseq ) {
        $element->setAttribute($attr_name, $attr->{$attr_name});
    }

    my $style = CSS::DOM::compute_style(
        element => $element, user_sheet => $sheet
    );

    my @attrseq = (style => grep { lc $_ ne 'style' } @$attrseq );
    $attr->{style} = $style->cssText;

    my $text .= join(" ",
        "<$tag",
        map{ qq/$_='$attr->{$_}'/ } @attrseq );
    $text .= '>';

    return $text;
}

sub skip {
    my ($tag) = @_;
    $tag = lc $tag;
    return 1 if $tag =~ /^(?:h(?:ead|tml)|link|meta|script|title)$/;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Perl 将文件中的 CSS 定义合并到内联样式属性中? 的相关文章

  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 如何消除 HTML 内容周围的边距?

    以下 HTML 显示正常 div style width 100px height 100px background red div Hello div div
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • Django:按钮链接

    我是一名 Django 新手用户 尝试创建一个按钮 单击该按钮会链接到我网站中的另一个页面 我尝试了一些不同的例子 但似乎没有一个对我有用 举个例子 为什么这不起作用
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 匿名方法作为函数结果

    我想要做的是将作为函数结果获得的匿名方法分配给相同类型的变量 Delphi 抱怨无法完成任务 显然 Delphi 的事情我想分配 GetListener 函数而不是同一函数的结果 非常感谢对此的任何帮助 type TPropertyChan
  • 如何仅对筛选数据/可见单元格应用 vlookup 公式

    我已经过滤了 A 列 我需要对 A 列中的可见单元格应用 vlookup 公式 我如何在 vba 中实现这一目标 工作表中的总行数为 30 000 过滤后的行数接近 100 您无需 VBA 只需使用 Excel 数组公式即可解决此问题 但如
  • 用 R 进行向量思考

    我知道 R 处理向量的效率最高 应该避免循环 我很难自学以这种方式实际编写代码 我想要一些关于如何 矢量化 我的代码的想法 下面是为 10 000 个非唯一状态组合创建 10 年样本数据的示例 st 计划1 p1 和计划2 p2 st lt
  • 动画边距底部 Silverlight

    我目前正在处理动画 我有一个隐藏搜索面板的网格 单击搜索按钮会将网格向下移动以显示搜索选项 我让这部分工作的问题是网格视图占用了所有可用空间 因此当搜索栏隐藏时它看起来很好 但如果搜索栏可见 那么网格底部就会离开页面 我一直在尝试使用边距来
  • 403 禁止网络根目录中的符号链接

    我位于 LAMP 堆栈上的共享托管包上 没有 shell 访问权限 我可以使用 PHP 创建符号链接symlink 功能 假设我的网络根目录是 home www user1 public 假设我有一个名为的真实目录 home www use
  • 使用 CircleCI 进行 Selen 测试

    我正在使用 CircleCI 我想运行 Huxley 测试 但为此我需要运行硒服务器 我试图运行 selenium 服务器独立 jar 那不是解决方案 如果您知道的话请帮忙 大多数浏览器测试框架都会为您提供 Selenium 如果您需要运行
  • CSS 浮点逻辑

    我创建了 25 个随机宽度和高度的盒子 其中width height 如图所示 document ready function e for var count 0 count lt 5 count for var iter 0 iter l
  • 数据库设计:1 个表还是 2 个表?

    我见过一些数据库设计 其中帐户表中包含所有用户信息 包括密码 电子邮件 出生日期 名字 姓氏等 我见过其他一些有两张桌子的 用户名 或电子邮件 密码 状态 激活等 组 管理员 所有者 用户等 and 名字 姓氏 出生日期 出生月份 出生年份
  • gcc - 属性 nothrow 有何用途?

    我查看了一些 gcc 属性列表 发现了这个引起了我的注意 nothrow The nothrow attribute is used to inform the compiler that a function cannot throw a
  • Laravel Eloquent 模型根据字段值为 null 或现有的情况进行更新

    我正在尝试像这样更新 Laravel Eloquent 模型 Res Reservations where time id time id gt where date bus date gt where valid config confi
  • 测试 getchar() == EOF 未按预期工作

    我有一个作业 编写一个允许用户输入最多 20 个整数的 C 程序 它将根据哨兵值或达到 20 个整数限制而停止接受数字 然后该程序应该显示这些数字以与输入相反的顺序 我决定将我的哨兵值设为 EOF 或 CTRL D CRTL Z 我的代码有
  • 如何设置文本框中的最大长度为 6 和最小长度为 6? [复制]

    这个问题在这里已经有答案了 考虑
  • 无法“git 推送”。 “Heroku Git 错误”已经持续 4 天了

    正如标题中所述 我无法推送到我的应用程序之一 git Push 到其他应用程序工作正常 因此凭据 密钥设置没问题 错误信息 git push app remote Heroku Git error please try again shor
  • 如何使用 UserDefaults 保存 UIColor? [复制]

    这个问题在这里已经有答案了 我正在尝试对我的代码进行编程 以便如果用户按下夜间按钮 背景将变黑 并在用户关闭应用程序时保持黑色 白天模式也是如此 请注意 我已经对按钮进行了编码 当他们按下它时 所有场景都会更改为该模式 这是我的代码 我需要
  • SQL - 如何根据现有数据集中的日期范围生成每个月的行?

    假设我有一个数据集 rowID dateStart dateEnd Year Month 121 2013 10 03 2013 12 03 NULL NULL 143 2013 12 11 2014 03 11 NULL NULL 322
  • 如何取消或停止 NSThread?

    我正在做一个应用程序 在读取 XML 文件时使用 NSThread 加载 viewControllers 的内容 我已经完成如下 void viewDidAppear BOOL animated Some code NSThread det
  • Android - Google 地图 API v2 - SupportMapFragment 错误

    我正在尝试第一次使用 Google Maps API v2 恢复并运行我的一个应用程序 我在密钥库中为我的应用程序创建了一个密钥 提取了 SHA1 哈希值 获取了 API 密钥 然后在应用程序内执行了以下操作 我包括 谷歌播放服务 jar
  • 在react三元运算符中使用AND语句(两个条件)

    下面是一个内联 if 与逻辑 运算符 它渲染一个组件 ifthis state isHidden是假的 div this state isHidden div
  • 未初始化的串行端口属性是否像使用默认构造函数时一样给出默认值?

    如果使用默认构造函数或无参数构造函数创建串行端口 则会为该端口指定默认值 从文档中 https msdn microsoft com en us library s14dyf47 v vs 110 aspx Create a new Ser
  • 如何使用 Perl 将文件中的 CSS 定义合并到内联样式属性中?

    许多电子邮件客户端不喜欢链接的 CSS 样式表 甚至不喜欢嵌入的 CSS 样式表