Internet Explorer îãðàíè÷àâà áðîÿ CSSè çà åäíà ñòðàíèöà
Ñáëúñêàõ ñå ñúñ ñëåäíèÿ ïðîáëåì : âðúçêàòà êúì âúíøåí ôàéë ñ êàñêàäíè ñòèëîâå ïðèñúñòâà â ãëàâàòà íà HTML äîêóìåíòà â IE, ñàìî äåòî êîìïîíåíòà íà ñòðàíèöàòà, çà êîéòî ñå îòíàñÿøå, ñè ñåäåøå áåç íèêàêúâ ñòèë. Âúâ Firefox ñòðàíèöàòà èçãëåæäà íîðìàëíî.
Òàêà íàó÷èõ, ÷å Internet Explorer íàëàãà îãðàíè÷åíèå çà ìàêñèìàëíèÿ áðîé âðúçêè êúì âúíøíè ñòèëîâå, ñúùî òàêà è êúì âãðàäåíè ñòèëîâå çà âñÿêà ñòðàíèöà. Ñòàòèÿòà â MSDN : “All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer”, ïîëåçíà äèñêóñèÿ íà ñàéòà íà Drupal : “Drupal >> Issues >>IE: Stylesheets ignored after 30 link/style tags”.
Ñåãà îáà÷å óñòàíîâèõ, ÷å è MSDN íå êàçâà èñòèíàòà – âñúùíîñò ñòèëîâåòå, êîèòî ñå ïðèëàãàò, íå ñà 30, à 31! Ïðîáëåìúò ñå ïðîÿâÿâà àêî ñå îïèòàø äà âêëþ÷èø 32-ðè ïî ðåä ñòèë.
 ïðèìåðà íà MSDN ñå äîáàâÿò ñòèëîâå ñúñ ñëåäíèÿ JavaScript êîä :
for (i=0 ; i < 31; i++)
{
document.createStyleSheet()
StyleSheetCount.innerText = "Total Style Sheets = " + i
}
Âèæäà ñå, ÷å çàïî÷âàò öèêúëà îò 0, è çà áðîéêà îòïå÷àòâàò íå áðîéêàòà, à èíäåêñà íà ïîñëåäíèÿ åëåìåíò.
Ëú÷î ïðåäïîëîæè, ÷å ÷èñëîòî 31 èäâà îò ôàêòà, ÷å íàé-âåðîÿòíî ñòèëîâåòå ñà 32 (åäíî âå÷å ìíîãî êðúãëî è êðàñèâî îò ïðîãðàìèñòêà ãëåäíà òî÷êà ÷èñëî), íî åäèíèÿò å çàïàçåí çà "âãðàäåíèÿ" â IE áàçîâ HTML ñòèë. È âñå ïàê íå ðàçáèðàì - çàùî àêî äîáàâÿø ñòèë ñ JavaScript òè äàâà ãðåøêà (íèùî, ÷å å íàïúëíî íåèíôîðìàòèâíà - "Error: Invalid argument."), à àêî ïðîñòî èìàø äåêëàðèðàíè âðúçêè êúì âúíøíè ñòèëîâå òåçè íàä 31âàòà ïðîñòî ñå èãíîðèðàò áåç ïðåäóïðåæäåíèå?!
Ñåãà ìå ãîíè ïàðàíîÿòà è ïåðèîäè÷íî ïîäñêà÷àì ñ âúïðîñà : "À äàëè Internet Explorer íå íàëàãà è îãðàíè÷åíèå çà. ...?"
Õà, íå áÿõ ÷óâàë çà òîâà îãðàíè÷åíèå (ìîæå áè çàùîòî íå ñúì ñòèãàë äî òîëêîâà ñòèëîâå çà åäíà ñòðàíèöà), íî íå ìå ó÷óäâà àìà íèêàê. Âñè÷êî å ìíîãî ëîãè÷íî – åäèí ïîäðàçáèðàù ñå, âãðàäåí â IE, åäèí ïîòðåáèòåëñêè è îñòàâàò 30 çà ñàìèÿ ñàéò. Ëåñíî ñå çàîáèêàëÿ ïðîáëåìà, íî äèñêóñèÿòà â Äðóïàë ïðåäëàãà ïî-äîáðî ðåøåíèå – äà ñå ñúáèðàò â åäèí CSS ôàéë. Çà Óúðäïðåñ íàìåðèõ íàáúðçî íÿêàêúâ ïëúãèí, êîéòî ïðàâè ñúùîòî –
http://www.i-marco.nl/weblog/archive/2007/05/31/wpcssstreamliner_css_optimizat
Áÿõ ñå çàìèñëèë çà ïðîáëåìà, äîêàòî ñè èãðàõ ñ YSlow, íî çà ëè÷íèÿ áëîã ðåøèõ, ÷å íå ñè ñòðóâà çàíèìàíèåòî.
À ïî êàêúâ ïîâîä íà òåá òè ñå å íàëîæèëî äà ïîëçâàø òîëêîâà ìíîãî ñòèëîâå?
Comment by Ãîíçî — 1/10/2008 @ 4:03 pm
Áåçóìíî å äà èìàø âðúçêà â HEAD êúì 30 è ïîâå÷å CSS ñòèëà! Ïîâå÷å îò 3-4 îáèêíîâåíî íå ñà íåîáõîäèìè — åäèí master.css, eäèí print.css, îùå 2-3 ìàêñèìóì, è… òîâà å. Àìà 30? Îñâåí òîâà òàêà ñå çàáàâÿ ìíîãî áðàóçúðúò è çàðåæäàíåòî íà âñÿêàêâè íåùî îò ñòðàíèöàòà, âñÿêà âðúçêà êúì íåùî èçâúí ñòðàíèöàòà = 1 connection, çàáàâÿíå, ñâàëÿíå, êåøèðàíå… Õì.
Òîâà ñ 30+ ñòèëîâå íå áèõ ãî íàïðàâèë íèêîãà, îñâåí íà intranet ñàéò ñ 100/1000 Mbit/s çà âñè÷êè ïîòðåáèòåëè â ìðåæàòà… è òî äîðè òîãàâà, áèõ ñå çàìèñëèë… ðŸ™‚
Âñå ïàê, ñàìîòî îòêðèòèå ñè çàñëóæàâà. Èíòåðåñíî è ïîëåçíî å (êàêòî àç âåäíúæ îòêðèõ, ÷å â Windows XP íÿìà íèêàêúâ íà÷èí äà èìàø ôàéë èëè äèðåêòîðèÿ, â ïúòÿ äî êîéòî/êîÿòî ñóìàðíî äà èìà ïîâå÷å îò 256 çíàêà).
Comment by Michel — 1/10/2008 @ 4:07 pm
Ïîâîäúò çà çàêà÷àíåòî íà òîëêîâà CSSè ñè áåøå áúã 😉 Êîéòî ùå áúäå îïðàâåí… Ïðè òîâà ìèñëÿ, ÷å òðÿáâà äà îñòàâÿò íà ñàìèòå ðàçðàáîò÷èöè äà ðåøàò äàëè 30 ñòèëà èì ñòèãàò. Èíà÷å â êîíêðåòíèÿ ñëó÷àé, èìàìå êîìïîíåíòíî ïðèëîæåíèå – âñÿêà êóòèéêà íà åêðàíà ñè èìà ñîáñòâåí CSS. Îòäàâíà èìà íóæäà îò îïòèìèçàöèÿ – êàòî îáåäèíÿâàíå íà CSSèòå. Íî áåøå îñòàâåíà çà ïî-êúñåí åòàï. Íà êîé äà ìó õðóìíå, ÷å ùå íè ïàäíå òàêàâà òóõëà íà ãëàâèöèòå! 🙂
Comment by Izida — 1/10/2008 @ 4:23 pm
Íÿìà äà êàæà íèùî íîâî, íî òîçè áðàóçúð å òîëêîâà àáñóðäåí è íåàäåêâàòåí… óâè, ïîñòîÿííî òðÿáâà äà ñå ñúîáðàçÿâàì ñ íåãî, êîãàòî ïðàâÿ íåùî.
Comment by cx — 1/10/2008 @ 4:47 pm
Èìà è äðóãè îãðàíè÷åíèå 🙂
– áðîÿ íà êóêèòàòà êúì åäèí äîìåéí
– ðàçìåð íà URL-òî (ñ GET ïàðàìåòðèòå)
– ïîçíàòèÿ ïðîáëåì ñ PNG êàðòèíêèòå
ñèãóðíî èìà è äðóãè…
Comment by Ãåîðãè — 1/10/2008 @ 5:33 pm
Íå ìèñëÿ, ÷å å êîé çíàå êîëêî ñëîæíà ïðè÷èíàòà çà òîâà îãðàíè÷åíèå.
class CPage {....
private:
CStylesheet *stylesheets[32];
...
}
Èëè íåùî â òîçè äóõ.
Comment by Ñòåôàí Êúíåâ — 1/10/2008 @ 11:05 pm
Ìèøåë, ìíîãî ñòèëîâå ìîãàò äà ñå íàòðóïàò àêî íàïðèìåð íàáëúñêàø Óúðäïðåñà ñè ñ ðàçøèðåíèÿ, êîèòî äîáàâÿò ñîáñòâåíè ñòèëîâå, êîìáèíèðàíî ñ íÿêîëêî îò òåìàòà (çà ðàçëè÷íè ìåäèè) ìîæå äà ñòàíå ñòðàøíî… Â Äðóïàë èëè Äæóìëà êàòî äîáàâèø ðàçíè ìîäóëè (èëè êàêòî ãè íàðè÷à ñúîòâåòíàòà ïëàòôîðìà) ìîæå äà èìà ñúùèÿ åôåêò. Òà ïîíÿêîãà òîâà ñå ñëó÷âà ïî íàçàâèñåùè îò ðàçðàáîò÷èöèòå ïðè÷èíè.
Ãåîðãè, äîáðå ÷å íàïîìíè, ùîòî îñâåí îãðàíè÷åíèåòî íà äúëæèíàòà íà GET, îñòàíàëèòå íå ñúì ãè èçïèòâàë íà ñîáñòâåí ãðúá. À òî áåøå áàÿ ãîëÿìî, 8ê ìàé.
Comment by Ãîíçî — 2/10/2008 @ 12:34 pm
Ñàìî äà äîáàâÿ – áðîé åäíîâðåìåííè êîíåêöèè êúì ñúðâúðà(ïðèìåðíî XHR èëè îò Flash) – ëèìèòèðàí å äî 2. (IE 8 – ñà ãè óâåëè÷èëè íà 6)
Comment by Äèìèòúð Êàðåâ — 2/10/2008 @ 1:53 pm