Łączenie plików w różne katalogi?

Question

Niedawno natknąłem się na problem na stronie internetowej, gdzie stylizacja na stronie była naprawdę pomieszana, ale tylko w IE. Mój szef powiedział mi, że prawdopodobnie jest tak, ponieważ renderowana paczka CSS zawiera pliki CSS z różnych katalogów, więc sprawdziłem i tak się stało. To był podobny do poniżej:

bundles.Add(new StyleBundle("~/path/subpath/all").Include(
       "~/path/subpath/filename.css", 
       "~/path/subpath/filename1.css", 
       "~/path/subpath/filename2.css", 
       "~/path/subpath/filename3.css", 
       "~/path/subpath/anotherSubPath/filename.css", 
       "~/path/subpath/anotherSubPath/filename1.css", 
       "~/path/aDifferentSubPath/filename.css")); 

Powiedział Bundling kulisy pracy tak, trzeba tylko mieć Pliki z tego samego katalogu w wiązce, więc podzielić je jak poniżej:

bundles.Add(new StyleBundle("~/path/subpath/all").Include(
      "~/path/subpath/filename.css", 
      "~/path/subpath/filename1.css", 
      "~/path/subpath/filename2.css", 
      "~/path/subpath/filename3.css")); 

bundles.Add(new StyleBundle("~/path/subpath/anotherSubPath/all").Include(
      "~/path/subpath/anotherSubPath/filename.css", 
      "~/path/subpath/anotherSubPath/filename1.css")); 

bundles.Add(new StyleBundle("~/path/aDifferentSubPath/all").Include(
      "~/path/aDifferentSubPath/filename.css")); 

To działało i naprawiło nasz problem w IE. OK, więc teraz na moje pytania:

• Czy mój szef miał rację? Czy nie możesz pakować plików z różnych folderów?
• Jeśli miał rację, dlaczego miałoby to tylko zakłócić IE? I dlaczego musisz tylko pakować pliki z tego samego katalogu?
• Jeśli nie był poprawny, jaki mógł być problem? I dlaczego rozdzielenie pakietu naprawiło to?

Answer 1

Dla starszych wersjach IE, przynajmniej < 10 istnieje kilka znanych ograniczeń

liczba plików CSS i skryptów IE można załadować - może to być problem, jeśli używasz witryny w Debug tryb, w którym pakiety nie zostaną spakowane.

Jeśli tak nie jest, to czy masz więcej niż 4096 selektorów w pliku?

Internet Explorer CSS limits

Answer 2

Istnieje powszechny problem z łączenie nazwę i folder, gdy pliki css użyć ścieżki względnej do plików statycznych, takich jak obrazy, czcionki itp

Na przykład masz:

bundles.Add(new StyleBundle("~/path/subpath/all").Include(
      ... 
      "~/path/subpath/anotherSubPath/filename1.css")); 

iw swoim filename1.css używasz background: url(image.jpg) i zazwyczaj ten obraz znajduje się w tym samym folderze co filename1.css, który jest ~/path/subpath/anotherSubPath/image.jpg. Używając bundów jak poniżej, przeglądarka szuka nieistniejącego pliku ~/path/subpath/all/image.jpg. Może to jest powód oddzielania pakietów.

Answer 3

Twój szef brzmi świetnie! Po pierwsze, dla ścieżek CSS są one powiązane z plikiem CSS, więc podejrzewam, że właśnie dlatego doradził ci, aby to zmienić.

Ale długość CSS również może stanowić problem i prawdopodobnie była to główna przyczyna w tym przypadku.

Niestety, istnieje kilka dziwactw w przeglądarkach, na które należy zwrócić uwagę, takich jak ten plik CSS, lub rozmiary obrazów na urządzeniach Apple (w tym przypadku działały z arkuszami sprite). Twój szef brzmi jak rodzaj dynamicznego, włączonego faceta, który to wie.