CSSRegions.js

18 lutego 2013
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

CSSRegions.js to eksperymentalny wypełniacz umożliwiający dzięki JavaScriptowi korzystanie z regionów CSS (CSS Regions) w przeglądarkach, które jeszcze ich nie obsługują.

Skrypt jest dostępny dla przeglądarek iOS 4+, Android 4+, Firefox, Chrome oraz Safari 5+.

Sposób użycia CSSRegions.js

Należy pobrać plik cssregions.js i dołączyć go do strony.

<body>
  ...
  <script src="cssregions.js"></script>
</body>

W arkuszu stylów własności CSS należy poprzedzać przedrostkiem -adobe-:

#content{
  -adobe-flow-into: myFlow;
}

.region{
  -adobe-flow-from: myflow;
}

Nie trzeba niczego konfigurować. Wystarczy po prostu wczytać skrypt wypełniacza, który automatycznie znajdzie deklaracje dotyczące regionów CSS oraz odpowiednio je przetworzy i zastosuje. Jeśli przeglądarka obsługuje regiony CSS, wypełniacz nie zostanie uruchomiony, aby mogły zadziałać algorytmy przeglądarki.

Obsługa skryptu przez przeglądarki

  • iOS 4+
  • Android 4+
  • Firefox
  • Google Chrome
  • Safari 5+

Ograniczenia

Wypełniacz CSSRegions.js jest skryptem eksperymentalnym, którego zadaniem jest zademonstrować podstawową funkcjonalność obszarów CSS. Imituje tę funkcjonalność (zgodnie ze specyfikacją CSS Regions W3C) przy użyciu JavaScriptu. Użycie tego języka sprawia, że wypełniacz działa wolniej niż standardowa implementacja przeglądarki.

Nie zaleca się używania skryptu CSSRegions.js w środowisku produkcyjnym jako zastępstwa dla standardowych algorytmów przeglądarki.

Wypełniacz rozpoznaje przedrostek -adobe- w składni CSS i CSSOM.

Składnia CSS

  • Deklaracja -adobe-flow-into: IDENT zbiera treść w nazwany układ
  • Deklaracja -adobe-flow-from: IDENT renderuje treść z nazwanego układu

Składnia CSSOM i zdarzenia

  • Metoda document.getNamedFlows() zmienia nazwę na document.adobeGetNamedFlows()
  • Zdarzenie regionlayoutupdate zmienia się w adoberegionlayoutupdate
  • Własność regionOverset zmienia się w adobeRegionOverset

Znane problemy ze skryptem

Znanych jest kilka ograniczeń tego eksperymentalnego skryptu:

  • Zapytania o media — wypełniacz nie reaguje automatycznie na zmiany określone przez zapytania o media;
  • DOM — wypełniacz nie reaguje automatycznie na zmiany w strukturze dokumentu;
  • Zdarzenia — wypełniacz rozbija węzły DOM, aby rozdzielić je na obszary. Może to mieć wpływ na procedury obsługi zdarzeń powiązane z tymi węzłami;
  • Stylizowanie obszarów — aktualnie bloki @region nie są obsługiwane;

Rozwiązanie problemu ze zmianą struktury dokumentu

Wypełniacz można zmusić do ponownego rozmieszczenia elementów wywołując w skrypcie metodę CSSRegions.doLayout() po dokonaniu zmian w arkuszach stylów lub elementach dokumentu.

<script>
  // Dodanie elementów do dokumentu
  // następnie
  CSSRegions.doLayout()
</script>

Dokumentacja

Pomoc w rozwijaniu skryptu

Kod źródłowy wypełniacza CSSRegions.js znajduje się w serwisie GitHub. Pomoc w pisaniu kodu jest mile widziana, ale przed rozpoczęciem pracy należy przeczytać wskazówki dotyczące pisania kodu.

Licencja

Apache License 2.0

2 komentarze

  1. „CSSRegions.js to eksperymentalny wypełniacz umożliwiający dzięki JavaScriptowi korzystanie z regionów CSS (CSS Regions) w przeglądarkach, które jeszcze ich nie obsługują.”

    Przydałaby się na początku informacja co to w ogóle jest CSSRegions?

    Odpowiedz

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *