預加載樣式表而不在頁面上執行

是否有任何方式預加載樣式表而不在頁面上執行，以便通過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

預加載樣式表而不在頁面上執行

回答

相關問題