Compass i css3PIE.

0

Mam sobie styl SCSS z użyciem Compass:

  • _config.scss (fragment)
@import "compass/css3/pie";

$pie-behavior: url("../stylesheets/PIE.htc");
$pie-base-class: pie-base;
  • main.scss (fragment)
@import "compass/css3/pie";
@import "config";

.pie-base {
  @include pie-element(relative);
}

body {
  @include pie;
  @include background(
      image-url('header_background.png') no-repeat top center,
      linear-gradient(top center,
        $bg-gradient-start, $bg-gradient-stop
      ) no-repeat,
      image-url('wavy-white.jpg')
    );
}

I tak jakby odmawia to współpracy, a mianowicie w IE8 i tak nic się nie wyświetla, a w IE9 nie działają w ogóle gradienty :/

0

A mógłbyś zamieścić CSS jaki toto generuje? Chyba to, co podałeś, to za mało żebym sam sobie go wygenerował (nie znam jednak Compassa).

Tak zupełnie na ślepo mogę strzelić z ustawieniami związanymi z plikiem .htc. Częste są dwa problemy:
a) Zła ścieżka. IE odczytuje ścieżkę plików .htc względem lokalizacji dokumentu (tj. pliku HTML), a nie względem arkusza CSS, jak np. ścieżki obrazków tła.
b) Zły typ MIME. IE wymaga, by plik .htc serwowany był z typem MIME text/x-component. Inaczej nie zadziała.

0

Tak więc (trochę stronę rozjechało, ale sam chciałeś :P):

/* line 6, ../sass/main.scss */
.pie-base, body, #menu, #header #about, #wrap-center, #main-content .panel, #footer {
  behavior: url("../stylesheets/PIE.htc");
  position: relative;
}

/* line 10, ../sass/main.scss */
body {
  background: url('../images/header_background.png?1321894355') no-repeat top center, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkY2FkNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiYSgyMzcsIDIwMiwgMjEzLCAwKSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') no-repeat, url('../images/wavy-white.jpg?1321738888');
  background: url('../images/header_background.png?1321894355') no-repeat top center, -webkit-gradient(linear, 50% 0%, 50% 750, color-stop(0%, #edcad5), color-stop(100%, rgba(237, 202, 213, 0))) no-repeat, url('../images/wavy-white.jpg?1321738888');
  background: url('../images/header_background.png?1321894355') no-repeat top center, -webkit-linear-gradient(top center, #edcad5, rgba(237, 202, 213, 0) 750px) no-repeat, url('../images/wavy-white.jpg?1321738888');
  background: url('../images/header_background.png?1321894355') no-repeat top center, -moz-linear-gradient(top center, #edcad5, rgba(237, 202, 213, 0) 750px) no-repeat, url('../images/wavy-white.jpg?1321738888');
  background: url('../images/header_background.png?1321894355') no-repeat top center, -o-linear-gradient(top center, #edcad5, rgba(237, 202, 213, 0) 750px) no-repeat, url('../images/wavy-white.jpg?1321738888');
  background: url('../images/header_background.png?1321894355') no-repeat top center, -ms-linear-gradient(top center, #edcad5, rgba(237, 202, 213, 0) 750px) no-repeat, url('../images/wavy-white.jpg?1321738888');
  -pie-background: url('../images/header_background.png?1321894355') no-repeat top center, linear-gradient(top center, #edcad5, rgba(237, 202, 213, 0) 750px) no-repeat, url('../images/wavy-white.jpg?1321738888');
  background: url('../images/header_background.png?1321894355') no-repeat top center, linear-gradient(top center, #edcad5, rgba(237, 202, 213, 0) 750px) no-repeat, url('../images/wavy-white.jpg?1321738888');
}

A PIE.htc jest zwracane z takim nagłówkiem:

[hauleth@NIUNIOBOOK ~]$ curl -I http://localhost/pink/stylesheets/PIE.htc
HTTP/1.1 200 OK
Server: nginx/1.0.10
Date: Wed, 23 Nov 2011 20:10:11 GMT
Content-Type: text/x-component
Content-Length: 31297
Last-Modified: Sun, 20 Nov 2011 13:05:29 GMT
Connection: keep-alive
Accept-Ranges: bytes
0

Typ MIME jest git, a ścieżka...? Liczy się to, czy IE w ogóle widzi HTC. W jakim katalogu masz dokument HTML? Tzn. co jest w pasku adresu przeglądarki po http://localhost/? (zakładam brak rewritingu ścieżek po stronie serwera)

0

Ogólnie cała strona to na razie jeden plik index.html bo to jest jak na razie tylko sam layout, więc cała ścieżka wygląda http://localhost/pink i o ile dobrze pamiętam (niestety nie jestem teraz w stanie sprawdzić) to plik niby był widziany przez IE.

0

No to jest źle. Pisałem o tym w pierwszym poście, punkt a).

Deklaracja CSS z behavior powinna mieć następującą postać:

behavior: url("stylesheets/PIE.htc");

Ścieżkę URL do plików htc podajemy względem index.html, a nie względem CSS-a, w którym jest deklaracja.

Jeśli nadal byłoby coś nie tak, to dla eliminacji błędów spróbuj tam wstawić ścieżkę bezwzględną, tj. http://localhost/pink/stylesheets/PIE.htc. Nie powinno to jednak być konieczne.

0

Działa, ale częściuwo bo dopiero po ustawieniu wyświetlania na języki od prawej do lewej. Inaczej jest jak było (testowane w IE9).

0

Dobra, musiałem to odpalić u siebie i wgryźć się w dokumentację CSS3 PIE.

Okazuje się, że wszystko, czego szukasz, można znaleźć w dokumentacji.

  1. Obrazki Ci nie działają, bo nawet ścieżki w -pie-background są odczytywane względem dokumentu HTML, a nie względem arkusza CSS. Czyli to samo, co z URL-em w behavior. Dla -pie-background Zamień ścieżkę "../images/" na "images/" lub podawaj bezwzględne ścieżki.
    Opisano tu: http://css3pie.com/documentation/known-issues/#relative-paths

  2. Gradienty RGBA nie są obsługiwane przez PIE, tj. wartość alpha zawsze jest równa 100% (brak jakiejkolwiek przezroczystości).
    Opisano tu: http://css3pie.com/documentation/supported-css3-features/#gradients

1 użytkowników online, w tym zalogowanych: 0, gości: 1