预加载样式表而不在页面上执行

是否有任何方式预加载样式表而不在页面上执行，以便通过javascript或jQuery存储在缓存中？预加载样式表而不在页面上执行

我知道，这是一个奇怪的要求，但这里是为什么我想这样做：

我有台式机，平板电脑和电话样式表。我只想加载正在使用的设备的必要规则。

我知道有这个选项：

<link rel="stylesheet" media="all and (max-width: 960px) and (min-width: 481px)" href="tablet.css" /> 
<link rel="stylesheet" media="all and (max-width: 480px)" href="phone.css" />

不过，我也想支持IE8和我已经使用JavaScript在各种屏幕尺寸的页面上的其他元素的操纵，所以我确定了JS的解决方案（可能会包含一些Chris Coyier's jQuery solution）。

我想CSS被缓存，以便如果用户在桌面上或有能力重新调整浏览器窗口大小到另一个设备范围，他们将不需要等待加载样式表在该断点。

是否已经检测到用户是否可以重新调整屏幕大小，因此我不需要此解决方案 - 我只需要知道是否可以使用jQuery或JavaScript缓存css样式表而不会实际影响页面布局，如果是这样怎么样？勾选后，

谢谢您的帮助

来源

2014-04-10 codelove

如果一个类名添加到''或''什么标签基于浏览器的宽度和重新命名所有的选择，开始与这个类名？ – passatgt

@passatgt这是一种相当“蛮力”的方式，但不是一个坏主意 –

@passatgt这实际上是我正在做的解决这个问题，但我需要让我们团队中的其他人编写规则，并且不希望他们需要在每个规则中使用该类。我现在正在考虑使用iframe或$（）。load将预加载的css缓存，但它似乎有点hacky ...我想只使用类似的方法，如果CSS尚未缓存... – codelove

你绝对可以做到这一点做这个点击事件，或者当您希望它加载，例如，如果你的检查jQuery的设备做到这一点指定应加载哪个元素。

$("#header").child("<link rel=\"stylesheet\" media=\"all and (max-width: 960px) and (min-width: 481px)\" href=\"tablet.css\" />");

来源

2014-04-10 18:25:07 Ohjay44

你也可以使用.append – Ohjay44

function get_css(url) { 
    var ss = $.ajax({ 
       type: 'GET', 
       dataType: 'text', 
       url: url, 
       async: false 
       }).responseText; 
    return ss; 
} 

function add_css(css, id) { 
    $("head").append('<style id="'+id+'" type="text/css">'+css+'</style>'); 
} 

var desktop = get_css('desktop_styles.css'); 
var mobile = get_css('mobile_styles.css'); 

// Determine breakpoint 
add_css(desktop, 'desktop_styles'); 

// Determine breakpoint 
add_css(mobile, 'mobile_styles');

来源

2014-04-10 18:37:57

你有没有想过尝试其他方法，比如媒体查询的样式表。

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/small.css' /> 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> 
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/large.css' />

来源：http://css-tricks.com/resolution-specific-stylesheets/

来源

2014-04-10 18:53:54 Jason

预加载样式表而不在页面上执行

回答

相关问题