小编jon*_*jon的帖子

什么是这个CSS选择器?[类*= "跨度"]

我在Twitter Bootstrap中看到了这个选择器:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}
Run Code Online (Sandbox Code Playgroud)

有谁知道这种技术被称为什么以及它做什么?

css css-selectors css3

180
推荐指数
3
解决办法
21万
查看次数

使用jQuery将一个标签替换为另一个标签

目标:

使用jQuery,我试图替换所有出现的:

<code> ... </code>
Run Code Online (Sandbox Code Playgroud)

有:

<pre> ... </pre>
Run Code Online (Sandbox Code Playgroud)

我的解决方案

我得到了以下,

$('code').replaceWith( "<pre>" + $('code').html() + "</pre>" );
Run Code Online (Sandbox Code Playgroud)

我的解决方案的问题:

但问题是,它正在用第一个 "代码"标签之间的内容替换(第二,第三,第四等)"代码"标签之间的所有内容.

例如

<code> A </code>
<code> B </code>
<code> C </code>
Run Code Online (Sandbox Code Playgroud)

<pre> A </pre>
<pre> A </pre>
<pre> A </pre>
Run Code Online (Sandbox Code Playgroud)

我想我需要使用"这个"和某种功能,但我担心我还在学习,并且不太懂得如何将解决方案拼凑在一起.

javascript jquery replace

98
推荐指数
6
解决办法
6万
查看次数

什么是:: content/:: slotted伪元素,它是如何工作的?

这对谷歌来说是不可能的,因为每篇关于:before:after伪元素的文章似乎都使用了"内容"这个词.

我在这篇 CSS-Tricks文章中听说过它,解释了如何将图像滑块实现为Web组件的示例用例.它出现在里面的代码示例是:

CSS

#slides ::content img {
   width: 25%;
   float: left;
}
Run Code Online (Sandbox Code Playgroud)

HTML

<template>
  ...
  <div class="inner">
    <content select="img"></content>
  </div>
</template>
Run Code Online (Sandbox Code Playgroud)

它似乎是指这个<content>标签,用于允许用户包含Web组件,但我想更深入地理解这一点.

编辑:

在进一步阅读之后,在上述文章中,我发现了一个链接作者的"Shadow DOM CSS Cheatsheet",其中包含一段解释::content伪元素的内容:

选择元素内的分布式节点.需要与不支持本机选择器的浏览器的polyfill-next-selector配对.

::content h1 {
    color: red;
}
Run Code Online (Sandbox Code Playgroud)

资料来源:http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/

这很有帮助,但我仍然发现整个事件相当不透明.还有其他见解吗?

css html5 web-component shadow-dom html5-template

74
推荐指数
2
解决办法
6540
查看次数

是否可以使属性值跨越多行?

例如

<div class="big
            left
            important"> some content </div>
Run Code Online (Sandbox Code Playgroud)

有谁知道这是否会破坏/有良好的浏览器支持?

html

50
推荐指数
2
解决办法
1万
查看次数

使用数据URI SVG作为CSS背景图像

背景故事:

  • 目标:创建一个可以通过CSS应用的三角形阴影,并且与比例无关(即矢量,而不是光栅图像)
  • 经过大量研究(我当然对替代方案开放)我选择使用SVG背景图像作为数据uri(以避免额外的HTTP请求).
  • 我知道,这可以工作:http://jsfiddle.net/6WAtQ/

我被困在哪里:

  • 我创建了一个简单的svg三角形,具有高斯模糊效果,如果它直接在HTML中编写(而不是CSS)svg完美运行:http://jsfiddle.net/RAKWB/

    <svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <polygon points="200,0 200,200 0,200" filter="url(#f1)"/> </svg>?

  • 所以我尝试用我自己的三角形svg 复制上面的内容(http://jsfiddle.net/6WAtQ/),

  • 我用'%23'替换了哈希标志,但没有骰子
  • 这不起作用:http://jsfiddle.net/ZPWxK/1/

    body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }

思考?

css svg vector css3 data-uri

12
推荐指数
2
解决办法
2万
查看次数

如何使用jquery生成和附加随机字符串

泛泛而谈

我想使用jQuery或javascript将随机字符串附加到元素的属性.

细节

我需要引用一个存在于CDN上的CSS文件.不幸的是,每次更新文件时,CDN都会更改此CSS文件的URL.所以我不能简单地引用一个静态URL.

事实证明,如果你将一个字符串附加到CDN以前从未见过的URL的末尾,它将返回该文件的最新版本.可以肯定的是.

例如

<link href="http://example.com/style.css?randomString-neverSeenBefore">
Run Code Online (Sandbox Code Playgroud)

我知道,这是丑陋的,错误的和疯狂的.但有时这就是饼干崩溃的方式.另一种方法是尝试在奇偶校验中保持越来越多的CSS文件和模板标题...不可行.;)

到目前为止我得到了什么,

我的jQuery技能很少.我发现了两个不同的代码,它们可以完成我自己需要的工作,但是我不知道如何让我们知道如何让它们一起工作.

代码#1:

        // this guy is a random number generator that i found
        jQuery.extend({
        random: function(X) {
            return Math.floor(X * (Math.random() % 1));
        },
        randomBetween: function(MinV, MaxV) {
          return MinV + jQuery.random(MaxV - MinV + 1);
        }
    });


    // using above plugin, creates 20 random numbers between 10 and 99
    // and then appends that 40 digit number to a paragraph element
    for (i = 0; i < 20; i++) …
Run Code Online (Sandbox Code Playgroud)

javascript jquery

11
推荐指数
2
解决办法
3万
查看次数

动画gif vs视频与画布 - 速度和文件大小

假设一个简单的产品演示,例如在http://www.sublimetext.com/上找到的那个

即这不是传统的高分辨率视频,可以合理地完成:

  • GIF动画
  • 视频(可嵌入youtube,自定义html5播放器,最具竞争力)
  • 帆布

问题是,哪个用户表现更好?两者都是:

  1. 用户必须下载的文件大小才能查看"产品演示"
  2. 显示"产品演示"的处理能力要求

如果你觉得有一种优越的技术来完成这个或另一个衡量其有用性的指标,请告诉我,我会相应调整.

video performance animated-gif html5-video html5-canvas

10
推荐指数
1
解决办法
8239
查看次数

如何使用AppleScript启动/停止Internet共享

我没有Wi-Fi路由器,因此在家时我需要将笔记本电脑变成Wi-Fi信号源,这样我和我的伙伴都可以访问互联网.

然而,在我在咖啡店工作并需要使用他们的Wi-Fi的日子里.

我正在运行Snow Leopard,我发现不断地关闭和开启,首先是Internet共享,然后是我的Wi-Fi,这非常麻烦.

快速'n'脏AppleScript解决方案的想法?

applescript

7
推荐指数
1
解决办法
6288
查看次数

JS中属性与方法的示例

我发现了对属性和方法之间语义差异的一个很好的描述(通过http://www.webdeveloper.com/forum/showthread.php?133712-Properties-Vs.-Methods进行了解释):

属性就像名词一样.他们有价值或国家.

方法就像动词一样.他们执行行动.

属性无法执行操作,并且方法具有的唯一值是在完成操作后返回的值.

例如

物业:门; 可能的值:打开,关闭

方法:openDoor; 操作:将门属性的值更改为"打开"

创造一个例子:我在理论上理解这一点,但我无法想出一个例子.是否有可能向我展示门/ openDoor在实际的Javascript代码中的外观?

javascript methods properties

7
推荐指数
1
解决办法
1万
查看次数

为Github Stars创建RSS源

有没有办法获得一个github星列表的RSS源?

我想通过IFTTT进入Pinboard.

rss github

6
推荐指数
2
解决办法
809
查看次数

Amazon S3与Github Pages - 导致最终用户页面加载时间更快?

我正在创建一个静态站点.它由Jekyll生成,版本使用git控制.但是,纯粹就最终用户速度而言:

在提供静态网站方面,哪种服务提供最快的页面加载时间?

performance github amazon-s3 static-site jekyll

5
推荐指数
1
解决办法
1085
查看次数

了解Javascript .sort参数

我无法理解为什么以下函数以数字方式对字符串进行排序(在代码的第三部分中).

var myArray = [10, 44, 32, 100, 0, 44, 3, 4];
console.log(myArray.toString()); // 10, 44, 32, 100, 0, 44, 3, 4 --> unsorted

myArray.sort();
console.log(myArray.toString()); // 0,10,100,3,32,4,44,44 --> sorted like strings

// this is what confuses me:
myArray.sort(function (a, b) {
return a - b;
});
console.log(myArray.toString()); // 0,3,4,10,32,44,44,100 --> sorted numerically
Run Code Online (Sandbox Code Playgroud)

特别是:

  1. 如何ab获取填充?

  2. 为什么减去a - b按数字顺序对数字进行排序?

  3. 如果函数一次仅检查2个数字,那么所有数字如何被分类到正确的顺序?(即ab)

javascript arrays sorting function

4
推荐指数
1
解决办法
2498
查看次数

获取PHP的问题包括使用不同文件夹中的文件

我是一个完整的PHP菜鸟,我正在使用一个非常简单的PHP包括:

<?php include("~head.php"); ?>
Run Code Online (Sandbox Code Playgroud)

为网站做一些模板(为我的所有页面实现常见的页眉,页脚,菜单).

  • 注意:波形符(〜)只是为了使目录更容易查看(按字母顺序排序时将主文件推送到列表顶部)

它适用于同一目录中的文件,但是当我在目录之外引用文件时,如下所示:

<?php include("../~head.php"); ?>
Run Code Online (Sandbox Code Playgroud)

但是,它似乎似乎没有找到文件,因为标题显然没有被拉入标记.

相反,如果我用完整的URL引用文件,例如

<?php include("http://example.com/~head.php"); ?>
Run Code Online (Sandbox Code Playgroud)

我在页面上收到以下错误代码.

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/content/65/7392565/html/bikini/angela_bikini.php on line 1

Warning: include(http://example.com/~head.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/content/65/7392565/html/products/product_a.php on line 1

Warning: include() [function.include]: Failed opening 'http://example.com/~head.php' for inclusion (include_path='.:/usr/local/php5/lib/php') in /home/content/65/7392565/html/products/product_a.php on line 1
Run Code Online (Sandbox Code Playgroud)

奇怪的是,"../ file.php"语法适用于非头文件(例如我用于菜单的包含).

因为这样的代码变得有点混乱,很难在所有不同的页面上保持变化.任何想法或解决方案将非常感谢.我真的是一个菜鸟,所以我可能无法将头脑包裹在任何太过花哨的地方.:)

谢谢你的时间.

乔恩

php include

1
推荐指数
1
解决办法
4882
查看次数