相关疑难解决方法(0)

"foo包含bar"的CSS选择器?

可能重复:
是否有CSS父选择器?

有没有办法使CSS选择器匹配以下?

All OBJECT elements
  which have a PARAM element inside of them
Run Code Online (Sandbox Code Playgroud)

选择器

OBJECT PARAM
Run Code Online (Sandbox Code Playgroud)

不起作用,因为它匹配PARAM,而不是OBJECT.我想将{display:none}应用于对象; 将它应用于PARAM是没用的.

(我知道我可以用jQuery - $("object param").closest("object")和VanillaJS - 来解决这个问题document.querySelector("object param").closest("object")- 但我正在尝试在页面上创建CSS规则.)

css css-selectors

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

如果我将css文件放在<head>或<body>中有什么区别?

通常css文件放在里面<head></head>,如果我把它放在里面<body></body>,它会有什么区别?

html css

153
推荐指数
4
解决办法
9万
查看次数

我们不应该使用<noscript>元素吗?

我在这里发现了一些好消息:

  • noscript元素仅检测浏览器是否启用了JavaScript.如果在防火墙中而不是在浏览器中禁用JavaScript,则JavaScript将不会运行,并且不会显示noscript元素的内容.

  • 许多脚本依赖于所支持语言的特定功能或特性,以便它们能够运行(例如document.getElementById).如果不支持所需的功能,则JavaScript无法运行,但由于支持JavaScript本身,因此不会显示noscript内容.

  • 使用noscript元素最有用的地方是在页面的头部,它可以有选择地确定在页面加载时应用于页面的样式表和元元素,而不必等到页面加载.不幸的是,noscript元素仅在页面主体内有效,因此不能在头部使用.

  • noscript元素是块级元素,因此只能在禁用JavaScript时显示整个内容块.它不能用于内联.

  • 理想情况下,网页应使用HTML作为内容,使用CSS作为外观,使用JavaScript作为行为.使用noscript元素是在HTML中应用行为而不是从JavaScript应用它.

资料来源:http://javascript.about.com/od/reference/a/noscriptnomore.htm

我非常同意最后一点.有没有办法制作和添加外部<noscript>文件?如果我们把<noscript><head>

javascript xhtml web-standards noscript

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

仅在Firefox中使用无格式内容(FOUC)的Flash?FF缓慢渲染?

我没有在我测试的任何其他浏览器中看到这个问题 - IE,Chrome,Opera - 但每当我从服务器加载页面时,我都会在应用CSS之前看到一些没有样式的内容.

这甚至发生在后续的页面加载中,其中所有内容都应该被缓存 - 每次页面加载时我都会看到非常规内容的瞬间,然后一切都安定下来.

也值得注意(也许?)该页面正在使用@ font-face来提取一些Google字体.它们存储在单独的样式表中,在主要的响应式样式表和媒体查询之后被拉出.

我尝试了一些不同的东西,没有效果:

  • 重新排列CSS样式表链接的顺序
  • 使用@ font-face删除样式表的链接
  • 禁用Firebug?(在这里读到......)

可能值得一提的另一件事是我在页面的CSS中使用了很多Element Type CSS选择器.这是否有可能减慢渲染过程?

这似乎不太可能,因为在改变窗口的尺寸时立即重新渲染页面没有问题 - 响应的东西立刻变得很好.

所以这让我相信CSS的加载方式存在一些问题.

这是我的HEAD代码:

<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>

<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" …
Run Code Online (Sandbox Code Playgroud)

css firefox stylesheet font-face fouc

12
推荐指数
7
解决办法
3793
查看次数

在jekyll中实现一个黑暗的主题

我正在尝试添加一个简单的亮/暗模式切换到我的Jekyll网站.

我现在设置它的方式是,正文有一个dark类切换到light切换类,并且localStorage只要用户进入新页面,主题就会保留并加载.该SCSS只是有选择的.dark,并.light会显示相应的配色方案.

这种方法的问题是我的默认主题是dark,所以如果主题被设置为,当light类切换darklight我加载新页面时,有一个非常清晰的.2秒闪存.

我已经尝试通过设置主体visibilty来解决问题,hidden然后visible在切换完成后重新设置它,但遗憾的是这种方法引入了另一个恼人的闪存/延迟,并且没有好办法阻止它在每个页面加载时闪烁.

我想到的一些潜在解决方案,但不知道它们是否可行或如何实现它们是:

  1. 让Jekyll以某种方式读取localStorage和更改基于它的呈现HTML的类(可能是最好的解决方案,但也可能不可能)
  2. 不知何故让Jekyll从SCSS生成两个单独的样式表,并使用JS来选择正确的样式表

    非常感谢有关如何做这些事情或潜在替代解决方案的任何见解,谢谢!

html javascript css fouc

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

Firefox 3.5+中的无格式内容Flash(FOUC)

我们已经到了我们的系绳的终点,试图克服Firefox 3.5.x +中令人讨厌和间歇性的FOUC,我们正在开发一个新的版本.

我们尝试过:

  • 在FF中禁用Javascript
  • 通过删除DOCTYPE使用Quirks模式渲染
  • @import额外的CSS转移到<link>
  • 打开和关闭串联
  • 从concat中删除CSS文件,一次一个
  • 在Firefox中关闭本地缓存
  • 等等

我们以前的版本从未展示任何FOUC问题,因此我们已经对此版本做了些什么.到目前为止我们所做的改变包括:

  • 在所有装饰图像的数据URI上使用Base64编码图像,通过CSS提供.
  • 将"框架"相关的CSS文件与特定于页面的CSS分离,并将它们捆绑为两个单独的CSS文件

要重新创建问题...使用Firefox 3.5.x或3.6.x,然后:

  1. 请访问:http://my.publisher-subdomain.env.yola.net/
  2. 使用用户名登录:'stack@yola.com'和密码:'stackoverflow'
  3. 登录后,您应该访问http://my.publisher-subdomain.env.yola.net/sites/
  4. 单击主导航中的"帐户"链接.
  5. 应该加载帐户页面,您应该看到FOUC.如果未发生FOUC,请清除缓存并重新加载页面.

非常感谢您的帮助!:)

更新:

开发环境仍在展示FOUC,但前提是FireFox内存不足或安装了大量扩展.延迟和渲染速度肯定会影响此FOUC的可见性.

css firefox base64 concatenation fouc

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