小编Tim*_*dly的帖子

响应INLINE SVG - svg的内容必须填充父宽度

目标:

我试图获得一个INLINE SVG元素来填充父元素的完整可用宽度.我可以使用imgobject标签来轻松地实现相同的效果来引用svg文件,但我想使用,inline svg因为我使用javascript动画svg内部元素.

问题:

我可以在Firefox中实现这一点,并且在Chrome中也有一些调整,但safari和IE9和IE10将无法​​播放.

  • svg的内部内容并不总是在所有屏幕宽度中填充svg元素
  • webkit添加了一个神秘的填充/高度(在这个例子中,填充在svg元素内)SVG元素的高度应该是auto并包装内部svg内容.

主要问题:

是否有响应式INLINE SVG的跨浏览器解决方案:查看IE9&10和-webkit-Safari中的示例,并注意SVG元素中不需要的额外高度(青色).

http://jsfiddle.net/David_Knowles/9tUAd/

<div class="block">stuff</div> 
<div class="wrap">
    <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet">

        <rect x="0" y="0" width="550" height="350"/>
        <polyline points="0,0 0,350 550,350"/>
        <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">The text</text>
    </svg>
</div>
<div class="block">stuff</div> 
Run Code Online (Sandbox Code Playgroud)

html svg responsive-design

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

Sass @import使用前导下划线

我知道最好在不使用前导下划线的情况下导入SASS/SCSS部分; 例如

__CODE__

我对书呆子完整性的问题是,如果文件是使用下划线导入的,是否存在问题?

__CODE__

sass partials

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

gulp-sass可以解决load_path支持吗?

问题:我正在使用gulp-sass并且想要定义一个load_path,这样我就不必拥有真正长的@import规则voor bower依赖关系,例如

@import "normalize"
Run Code Online (Sandbox Code Playgroud)

代替

@import "../../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize"
Run Code Online (Sandbox Code Playgroud)

当使用gulp-sass使用LibSass引擎处理sass文件时,我实现这一目标的最佳方法是什么?

css import sass load-path gulp-sass

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

Mac上的Google Chrome开发者工具键盘快捷键自定义

我使用Firefox Firebug进行调试,但如果可以自定义键盘快捷键,则会切换到Google Chrome.

我需要激活和隐藏'开发者工具>检查元素',每天1000次.试图用一只手打CMD+ SHIFT+ C,这是一场噩梦.我用鼠标导航

扩展程序"快捷方式管理器"具有有限的内置选项.添加Javascripts的能力对我没有帮助,你会从哪里开始这样的任务?

因为"检查元素"在Mac菜单中没有存在,所以我甚至无法以这种方式定位它.

有任何想法吗?

macos customization google-chrome keyboard-shortcuts developer-tools

8
推荐指数
2
解决办法
9430
查看次数

NPM live-server:找不到命令

我在全球范围内安装了live-server:

npm install -g live-server 但由于某种原因,它没有找到,我得到以下错误

bash: live-server: command not found 在命令之后 live-server

一切都正确安装:

/Users/username/npm-global/bin/live-server ->
/Users/username/npm-global/lib/node_modules/live-server/live-server.js
live-server@0.9.2 /Users/username/npm-global/lib/node_modules/live-server
??? object-assign@4.0.1
??? colors@1.1.2
??? event-stream@3.3.2 (pause-stream@0.0.11, duplexer@0.1.1, stream-combiner@0.0.4, from@0.1.3, map-stream@0.1.0, split@0.3.3, through@2.3.8)
??? opn@4.0.0 (pinkie-promise@2.0.0)
??? send@0.13.1 (escape-html@1.0.3, destroy@1.0.4, statuses@1.2.1, etag@1.7.0, fresh@0.3.0, range-parser@1.0.3, ms@0.7.1, debug@2.2.0, depd@1.1.0, mime@1.3.4, on-finished@2.3.0, http-errors@1.3.1)
??? morgan@1.7.0 (on-headers@1.0.1, basic-auth@1.0.3, depd@1.1.0, on-finished@2.3.0, debug@2.2.0)
??? connect@3.4.1 (utils-merge@1.0.0, parseurl@1.3.1, debug@2.2.0, finalhandler@0.4.1)
??? faye-websocket@0.10.0 (websocket-driver@0.6.4)
??? watchr@2.3.10 (bal-util@1.18.0)
??? serve-index@1.7.3 (parseurl@1.3.1, escape-html@1.0.3, batch@0.5.3, http-errors@1.3.1, debug@2.2.0, mime-types@2.1.10, accepts@1.2.13)
Run Code Online (Sandbox Code Playgroud)

我在这里错过了什么?

bash node.js npm npm-live-server

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

如何在&lt;time&gt;标记中“ the present”中进行语义定义

我正在使用时间标签来定义时间-就像正确的方法一样;-)

但是我的问题是我想在时间标记中放置的值是NOW:present。我收到此验证错误:

The text content of element time was not in the required format:
The literal did not satisfy the time-datetime format."
Run Code Online (Sandbox Code Playgroud)

查看规范,似乎无法定义'NOW'。真讨厌 关于如何解决这个问题的任何想法?

html time microformats html5 date

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

@font-face:图标字体和转换 CSS 字符(十六进制)值

背景

我目前正在大量使用 webfonts,特别是图标字体。我需要确定特定图标的哪个字符用于测试目的,因此我可以简单地输入字符和/或复制粘贴它。

例子

大多数图标字体的 CSS 是相似的,使用 :before 伪方法,例如

.icon-search:before{content:"\f002"}
Run Code Online (Sandbox Code Playgroud)

  • 我相信这种编码被称为 CSS 字符(十六进制),这是正确的吗?
  • 是否有任何工具允许我输入转义的 CSS 字符值并将其转换为我可以复制和粘贴的值
  • 是否有工具可以将其转换为 HTML 十进制值,例如 & = simple amperstand

概括

我希望能够找出它是哪个字符,这样我就可以简单地在键盘上输入它。我花了很长时间查找它,但不太确定这种类型的编码和转换称为什么,所以找不到我要找的东西。我很感激一些指点。

icons character-encoding webfonts font-face icon-fonts

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