Jestem w trakcie tworzenia mojej pierwszej solowej aplikacji Rails przy użyciu Rails 3.1.rc5. Mój problem polega na tym, że chcę, aby moja witryna warunkowo renderowała różne pliki CSS. Używam Blueprint CSS i staram się renderować koła zębate / szyny przez screen.css
większość czasu, print.css
tylko podczas drukowania i ie.css
tylko wtedy, gdy strona jest otwierana z przeglądarki Internet Explorer.
Niestety, domyślne *= require_tree
polecenie w application.css
manifeście zawiera wszystko w assets/stylesheets
katalogu i powoduje nieprzyjemne pomieszanie CSS. Moje obecne obejście to rodzaj metody brutalnej siły, w której określam wszystko indywidualnie:
W application.css:
*= require_self
*= require home.css
...
*= require blueprint/screen.css
W moich arkuszach stylów częściowe (haml):
<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"
To działa, ale nie jest szczególnie ładne. Poświęciłem kilka godzin na szukanie, aby dojść tak daleko, ale mam nadzieję, że jest na to jakiś łatwiejszy sposób, który właśnie przegapiłem. Gdybym mógł nawet selektywnie renderować niektóre katalogi (bez włączania podkatalogów), cały proces byłby znacznie mniej sztywny.
Dzięki!
.css
plików, wszystkie twoje obrazy zostaną zepsute. Np.background: url('image.png')
Zostanie przetłumaczone na ścieżkę/assets/all/image.png
(pamiętaj o wszystkim na ścieżce). Zamiast tego działa:background: url('/assets/image.png)
. Jeśli istnieje prostsze rozwiązanie tego problemu, opublikuj je. Poza używaniem SASS, który ma metody pomocników, które prawdopodobnie poprawnie rozwiązują ścieżkę.Dzisiaj napotkałem ten problem.
Skończyło się na umieszczeniu wszystkich arkuszy stylów specyficznych dla IE w lib / asset / stylesheets i utworzeniu jednego pliku manifestu dla każdej wersji IE. Następnie w application.rb dodaj je do listy rzeczy do prekompilacji:
Uwzględnij warunkowo te pliki manifestu w swoich układach i gotowe!
źródło
To całkiem fajny sposób na zrobienie tego. Używam klas warunkowych w html lub modernizr. Zobacz ten artykuł, aby zobaczyć, co robi. modernizr-vs-conditional-classes-on-html
źródło