Błędy i niespójności CSS w Firefoksie 3.x

Nie ma wielu artykułów dotyczących niezgodności lub różnic CSS w samej przeglądarce Firefox - i nie bez powodu.

Firefox zawsze świetnie radził sobie z obsługą zarówno CSS, jak i JavaScript w sposób zgodny ze standardami, bez zbyt wielu niezręcznych błędów.

Istnieje jednak kilka właściwości i selektorów CSS, które nie są obsługiwane przez jedną lub więcej wersji wydanych od wersji 3.0., Które omówię tutaj.

Ten artykuł obejmie błędy, niespójności i nieobsługiwania . Jeśli masz problemy z właściwością CSS lub selektorem w Firefoksie i nie ma jej tutaj na liście, prawdopodobnie będziesz musiał ponownie przemyśleć swój układ i ponownie zastanowić się, co może być winowajcą.

Od Firefoksa 2 jest praktycznie nie istnieje Nie będę rozważał konkretnie tej wersji, ale ta informacja będzie domyślnie dotyczyć tej wersji.

I powinienem zauważyć, że materiał na to stanowisko został zaczerpnięty przede wszystkim z niedawno zaktualizowany SitePoint Odnośnik CSS , który jest bezapelacyjnie najlepszym i najbardziej wszechstronnym referencją CSS dostępnym wszędzie.

Błąd przepełnienia konturu

W Firefoksie 3.x, gdy element przepełnia granicę rodzica, który ma outline zestaw właściwości, kontur zostanie rozciągnięty, aby pasował do elementu zawierającego, jak pokazano na zrzucie ekranu poniżej:

Poprawna implementacja jest pokazana na następnym zrzutowaniu ekranu pobranym z Chrome:

Jak pokazano powyżej, obrys powinien obejmować element, który jest naszkicowany i nie powinien na niego wpływać żaden przepełniony element. Aby upewnić się, że nie ma zamieszania, należy zauważyć, że jest to błąd w implementacji outline własność, a nie border własność.

Odniesienie: Odsyłacz do SitePoint CSS: outline property

Tabele ze zwiniętymi granicami

W przeglądarce Firefox, gdy tabela ma ustawione granice collapse używając border-collapse Właściwość, górny i lewy margines stołu w stosunku do pobliskich elementów wynosi 1 piksel. Jest to pokazane na powiększonym zrzucie ekranu na poniższym obrazku, który wyświetla dolną granicę elementu blokowego (czerwonego) dotykającego górnej krawędzi zwiniętego stołu (niebieski):

Oto poprawna implementacja tej pary właściwości / wartości, jak pokazano w Chrome:

Jak pokazano powyżej, ponieważ krawędzie są "zwinięte", a ponieważ tabela nie jest elementem blokowym, powinno być niewielkie przesunięcie na lewym marginesie, a górny margines powinien być równy dolnej krawędzi elementu powyżej.

Odniesienie: SitePoint CSS Reference: border-collapse Property

Puste komórki w wierszach tabeli

Jest to wartość właściwości, która nie jest poprawnie zaimplementowana przez żadną przeglądarkę, w tym Firefox. Gdy wiersz tabeli nie ma widocznej treści, a wszystkie komórki mają swoje empty-cells właściwość ustawiona na hide , cały wiersz powinien zachowywać się tak, jakby był ustawiony na "display: none", bez widocznych granic ani tła.

Żadna przeglądarka nie obsługuje tego poprawnie, więc wiersz tabeli jest nadal widoczny, jak pokazano na poniższym obrazku.

Odniesienie: Odnośnik SitePoint CSS: pusta komórka Właściwość

Odstępy między wyrazami w elementach wbudowanych

W Firefoksie 3.x wartość ujemna na word-spacing Właściwość będzie traktowana jako zero na sąsiednich elementach śródliniowych. Wartość ujemna powinna spowodować, że elementy śródliniowe zachodzą na siebie nawzajem, jak miało to miejsce w przypadku tekstu, ale tak się nie dzieje. Zamiast tego elementy otrzymują zerową separację białych odstępów bez nakładania się.

Poniższy obrazek wyświetla zarówno prawidłowe, jak i niepoprawne implementacje:

W powyższych przykładach trzy słowa "Owoce", "Warzywa" i "Inne produkty spożywcze" są indywidualnie pakowane elementy, podczas gdy akapit, który je otacza, ma swoje word-spacing właściwość ustawiona na wartość ujemną.

Drugi przykład (Firefox) nie stosuje negatywnego odstępu między wyrazami, z wyjątkiem dwóch ostatnich słów, ponieważ te słowa nie są pojedynczo zawijane przez przęsła, ale są naturalnymi elementami tekstowymi.

Jako punkt poboczny, ten błąd występuje podobnie w IE8, ale nie w poprzednich wersjach IE.

Odniesienie: SitePoint CSS Reference: word-spacing Property

Dekoracja tekstowa na pływających potomkach

Gdy element ma ustawioną wartość dekoracji tekstu, wartość ta nie powinna być dziedziczona przez pływające elementy potomne. W Firefoksie 3.x, pływający potomkowie otrzymują te same wartości do dekoracji tekstu co ich rodzice, nawet jeśli tak nie jest.

Na powyższym obrazie pierwsza linia to zrzut ekranu z IE8, wyświetlający a element unosi się wewnątrz kotwicy. Tekst w środku nie ma widocznej dekoracji tekstowej, która jest właściwym sposobem jej wyświetlenia. W przeglądarce Firefox (pokazanej w drugim przykładzie), dekoracja tekstu jest niewłaściwie zastosowana do pływającego .

Być może zauważyłeś tego błędu w Firefoksie, próbując usunąć dekorację tekstową z pływających obrazów wewnątrz kotwic.

Odniesienie: SitePoint CSS Reference: text-decoration Property

pre-line i pre-wrap dla właściwości white-space w FF 3.0

Używając white-space Właściwość w Firefoksie 3.5, możesz określić, czy wiele spacji ma być zwiniętych do pojedynczej spacji, czy nie. Domyślnie dokumenty HTML zwijają wiele spacji do jednego miejsca. W niektórych przypadkach możesz złożyć wniosek white-space: pre aby zapobiec zawaleniu się białej przestrzeni, co jest podobne do użycia

  Tag HTML.  Następnie możesz usunąć to ustawienie za pomocą white-space:  pre-line  (aby zwinąć białe pole). 
  Firefox 3.0 nie obsługuje tej wartości, więc biała przestrzeń zostanie zachowana.  Firefox 3.5 prawidłowo porządkuje miejsce.  Poniższy obrazek pokazuje oba przykłady: 
  Podobnie, gdy ustawiony jest akapit tekstu white-space:  pre-wrap  Powinno to zachować białe przestrzenie między słowami, ale naturalnie powinno zawierać podział na linie.  Firefox 3.0 nie implementuje tego poprawnie, podczas gdy nowsze wersje (i wszystkie inne przeglądarki) zawierają naturalne łamanie linii.  Oba przykłady przedstawiono poniżej. 
  Pamiętaj, że element zewnętrzny jest podany white-space: pre  podczas gdy wewnętrzny   próbuje zastąpić brak podziałów linii za pomocą pre-wrap  .  Na własną rękę, pre-wrap  nie miałoby żadnego efektu. 
  Firefox 3.x również traktuje niektóre white-space  wartości inaczej niż inne przeglądarki, gdy te wartości są stosowane do </code>  element.  Na przykład zastosowanie <code>white-space:  nowrap</code>  powinien spowodować, że cały tekst wpisany jest w <code><textarea></code>  aby utworzyć jedną linię, ale Firefox 3.x tego nie robi. </p><p>  <strong>Odniesienie:</strong> <a href="http://reference.sitepoint.com/css/white-space" class=external rel=nofollow>SitePoint CSS Reference: white-space Property</a></p><ul></ul><p class=clearrow></p><h2>  Właściwości podziału strony </h2><p>  CSS pozwala programistom na określenie, gdzie podziały stron powinny lub nie powinny wystąpić przy użyciu trzech właściwości <code>page-break-before</code>  , <code>page-break-inside</code>  , i <code>page-break-after</code>  .  Opera jest jedyną przeglądarką, która w pełni obsługuje te właściwości, podczas gdy inne przeglądarki oferują częściową obsługę lub brak wsparcia. </p><p>  The <code>page-break-inside</code>  Właściwość określa, czy podział strony może wystąpić w pojedynczym elemencie blokowym.  Firefox nie zapewnia obsługi tej właściwości.  Używanie składni <code>page-break-inside:  avoid</code>  , możesz zapobiec podziałowi elementu podczas drukowania.  Poniższy obraz z podglądu wydruku w Operze 10 pokazuje, w jaki sposób ta właściwość może uniemożliwić rozdzielenie nieuporządkowanej listy na dwie strony: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/c/d1/22/css-bugs-and-inconsistencies-in-firefox-3-x_10.gif" alt="" width=615 height=293 /></div><p>  Natomiast spójrz na poniższy obraz, zaczerpnięty z opcji podglądu wydruku w Firefoksie 3.5: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/9/18/ac/css-bugs-and-inconsistencies-in-firefox-3-x_11.gif" alt="" width=615 height=278 /></div><p>  <strong>Odniesienie:</strong> <a href="http://reference.sitepoint.com/css/pagedmedia" class=external rel=nofollow>SitePoint CSS Reference: Paged Media Properties</a></p><ul></ul><p class=clearrow></p><h2>  Sieroty i wdowy na stronach do druku </h2><p>  The <code>orphans</code>  i <code>widows</code>  Właściwości CSS są obsługiwane tylko przez Internet Explorer 8 i Opera od wersji 9. Właściwość ta jest używana do określenia minimalnej liczby linii z pojedynczego akapitu, które mogą wystąpić na wydrukowanej stronie, na dole (sieroty) lub na górze (wdowy ).  W zależności od wybranej liczby linie będą przenoszone z jednej strony na drugą (lub poprzedniej), aby zapobiec drukowaniu pojedynczej linii u góry lub u dołu strony. </p><p>  Nawet z <code>orphans</code>  Właściwość ustawiona na wartość "3", jak pokazano na poniższym obrazku, podgląd wydruku Firefoksa pokazuje pojedynczą linię na dole jednej z drukowalnych stron: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/e/d0/f4/css-bugs-and-inconsistencies-in-firefox-3-x_12.gif" alt="" width=615 height=162 /></div><p>  Podobny do <code>page-break-inside</code>  właściwość, Firefox również nie obsługuje wartości <code>avoid</code>  , <code>left</code>  , i <code>right</code>  dla obu <code>page-break-before</code>  i <code>page-break-after</code>  nieruchomości. </p><p>  <strong>Referencje:</strong> <a href="http://reference.sitepoint.com/css/orphans" class=external rel=nofollow>SitePoint CSS Reference: property orphans</a>  | <a href="http://reference.sitepoint.com/css/widows" class=external rel=nofollow>SitePoint CSS Reference: wdów Property</a></p><ul></ul><p class=clearrow></p><h2>  The: Pseudo-Element Bug pierwszej linii </h2><p>  The <code>:first-line</code>  pseudoelement pozwala pierwszemu wierszowi dowolnego bloku tekstowego mieć inne formatowanie niż reszta tekstu.  Na przykład pierwszy wiersz akapitu tekstu można zmienić na wielkie litery lub na inny kolor.  Aby ten element CSS działał w sposób praktyczny, powinien uwzględniać możliwość zagnieżdżania elementów blokowych.  Na przykład a <code><div></code>  element zawierający <code><p></code>  element powinien umożliwiać <code>:first-line</code>  pseudoelement do zmiany stylu pierwszego wiersza tekstu wewnątrz <code><div></code>  .  W Firefoxie (i wielu innych przeglądarkach) nie jest to możliwe, chyba że pseudoelement jest specjalnie ukierunkowany na akapit potomny. </p><p>  Internet Explorer 8, Chrome i Safari implementują tę funkcję poprawnie, zapobiegając zagnieżdżaniu się elementów blokujących przed zerwaniem stylizacji, jak pokazano na poniższym obrazku: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/1/82/8f/css-bugs-and-inconsistencies-in-firefox-3-x_13.gif" alt="" width=615 height=249 /></div><p>  W powyższym akapicie tekst znajduje się wewnątrz znaku <code><p></code>  element, który znajduje się wewnątrz <code><div></code>  .  The <code><p></code>  zawiera <code>:first-line</code>  pseudoelement ustawiony na <code>color:  blue</code>  , który nie powiedzie się w Firefoksie z powodu zagnieżdżenia akapitu wewnątrz <code><div></code>  . </p><p>  <strong>Odniesienie:</strong> <a href="http://reference.sitepoint.com/css/pseudoelement-firstline" class=external rel=nofollow>SitePoint CSS Reference: first-line Pseudo-Element</a></p><ul></ul><p class=clearrow></p><h2>  Obsługa CSS3 w Firefoksie 3.x </h2><p>  Firefox stopniowo dodał lepszą obsługę CSS3 od wydania wersji 3.0.  Poniżej znajduje się opis obsługi przez Firefoksa różnych funkcji CSS3.  Niektóre z nich mogą nadal znajdować się w <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsWD" class=external rel=nofollow>roboczych roboczych</a>  lub <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsCR" class=external rel=nofollow>rekomendacja kandydacka</a>  etapie, dlatego nie możemy być dogmatyczni co do tego, co powinno i nie powinno być wspierane, dopóki nie dotrą do <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsW3C" class=external rel=nofollow>zalecenie</a>  etap. </p><ul><li>  Firefox 3.0 nie obsługuje <code>text-shadow</code>  własność </li><li>  Firefox 3.x nie obsługuje <code>box-shadow</code>  właściwość, z wyjątkiem sytuacji, gdy używany jest zastrzeżony przedrostek <code>-moz-</code></li><li>  Firefox 3.x nie obsługuje <code>box-sizing</code>  właściwość, z wyjątkiem sytuacji, gdy używany jest zastrzeżony przedrostek <code>-moz-</code></li><li>  Firefox 3.x nie obsługuje wielu kolumn, chyba że zastrzeżony przedrostek <code>-moz-</code>  Jest używane </li><li>  Firefox 3.0 i 3.5 nie obsługują gradientów CSS3 i wielu środowisk (oba zostały ostatnio dodane w 3.6) </li><li>  Firefox 3.0 nie obsługuje <code>border-image</code>  właściwość, ale 3.5 obsługuje ją przy użyciu <code>-moz-</code>  zastrzeżony prefiks </li><li>  Firefox 3.0 nie obsługuje wielu pseudoklas CSS3 (: nth-child,: nth-last-child,: nth-of-type, itp.) </li><li>  Firefox 3.0 nie obsługuje transformacji CSS </li><li>  Firefox 3.x nie obsługuje przejść CSS </li><li>  Firefox 3.x nie obsługuje animacji CSS </li></ul><p class=clearrow></p><h2>  Inne funkcje CSS nie są obsługiwane </h2><p>  Niektóre z bardziej znaczących błędów i niezgodności zostały omówione powyżej, ale warto zwrócić uwagę na kilka innych. </p><ul><li>  Firefox do wersji 3.5 nie obsługuje tej wartości <code>run-in</code>  dla <code>display</code>  własność </li><li>  Firefox nie obsługuje <code>::selection</code>  pseudoelement </li><li>  Zasada @page at-rule nie jest obsługiwana przez Firefoksa </li><li>  Zasada @ font-face at-rule nie jest obsługiwana przez Firefox 3.0 </li></ul><p class=clearrow></p><h2>  Wniosek </h2><p>  Po przejściu przez ten materiał widać wyraźnie, że <strong>brak obsługi funkcji CSS w Firefoksie jest minimalny, aw wielu przypadkach zupełnie nieistotny,</strong> ponieważ wiele omawianych tutaj właściwości nie jest powszechnie używanych. </p><p>  Niemniej jednak mam nadzieję, że zapewni to godne referencje dla najbardziej znaczących błędów i niespójności w Firefoksie.  Jeśli masz problemy z określoną cechą CSS w Firefoksie, która nie jest tutaj wymieniona, prawdopodobnie robisz coś złego lub nie możesz w pełni zrozumieć pewnych pojęć i zasad CSS. </p><p>  W związku z tym to odniesienie <strong>powinno dobrze działać jako odwrotne odniesienie</strong> , ponieważ te niewymienione tutaj mogą być zaufane, jeśli działają poprawnie, jeśli są poprawnie implementowane z właściwą składnią. </p><p>  Oczywiście, jeśli jest coś, co przeoczyłem lub jakieś błędy, proszę o komentarz, a ja dołożę wszelkich starań, aby wprowadzić niezbędne poprawki i dodatki. </p><p class=clearrow></p><h2>  Dalsze referencje </h2><ul class=tight_list><li><a href="https://developer.mozilla.org/En/CSS_improvements_in_Firefox_3" class=external rel=nofollow>Poprawki CSS w Firefoksie 3</a></li><li><a href="https://developer.mozilla.org/En/Firefox_3.5_for_developers#Newly-supported_CSS_features" class=external rel=nofollow>Nowo obsługiwane funkcje CSS w Firefoksie 3.5</a></li></ul><p><br class=spacer_ /></p><p>  <em>Firefox Obraz dostarczony przez</em> <em><a rel=nofollow href="http://rakaz.nl/2004/10/firefox-wallpapers.html" class=external></em>  <em>Rakaz</em></a> <em><br class=spacer_ /></em> </p><p>  <em>Ten post został napisany wyłącznie dla Webdesigner Depot przez Louisa Lazarisa, niezależnego pisarza i programistę.</em>  <em>Louis ucieka</em> <em><a rel=nofollow href="http://www.impressivewebs.com/" class=external></em>  <em>Imponujące sieci</em></a>  <em>gdzie publikuje artykuły i samouczki dotyczące projektowania stron internetowych.</em>  <em>Możesz śledzić Louisa</em> <em><a rel=nofollow href="http://twitter.com/ImpressiveWebs" class=external></em>  <em>na Twitterze</em></a>  <em>lub skontaktuj się z nim</em> <em><a rel=nofollow href="http://www.impressivewebs.com/contact" class=external></em>  <em>poprzez jego stronę internetową</em></a>  <em>.</em> </p><p><br class=spacer_ /></p>


        <div class="bootstrap-tagsinput">
                        <span class="tag label label-info"><a href="https://pl.odwebdesign.net/tag/css/">css</a> </span>
                        <span class="tag label label-info"><a href="https://pl.odwebdesign.net/tag/firefox/">firefox</a> </span>
                        <span class="tag label label-info"><a href="https://pl.odwebdesign.net/tag/bledy/">błędy</a> </span>
                        <span class="tag label label-info"><a href="https://pl.odwebdesign.net/tag/bledy-css/">Błędy css</a> </span>
                        <span class="tag label label-info"><a href="https://pl.odwebdesign.net/tag/firefox-3/">firefox 3</a> </span>
                        <span class="tag label label-info"><a href="https://pl.odwebdesign.net/tag/bledy-firefox/">błędy firefox</a> </span>
                        <span class="tag label label-info"><a href="https://pl.odwebdesign.net/tag/niespojnosci/">niespójności</a> </span>
                    </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="pager">
            
            <li class="previous"><a href="https://pl.odwebdesign.net/fight-div-itis-and-class-itis-with-the-960-grid-system/">← Walcz z Div-Itis i Class-Itis za pomocą systemu 960 Grid</a></li>            
            <li class="next"><a href="https://pl.odwebdesign.net/wordpress-vs-expressionengine-apples-and-oranges/">Vs WordPress.  ExpressionEngine: Jabłka i pomarańcze? →</a></li>        </ul>
    </div>
</div>



                                                                
            </div>
                <div class="col-md-3">
                                        <aside class="col-lg-12 side-bar col-md-12">
    <ul class="nav nav-tabs">
        <li class="active"> <a data-toggle="tab" href="#latest" role="tab">Najnowsze</a> </li>
        <li> <a data-toggle="tab" href="#popular" role="tab">Najlepsze</a> </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content sidebar-tabing" id="nav-tabContent">
        <div class="tab-pane active" id="latest" role="tabpanel">
            
                        <div class="media"> <a href="https://pl.odwebdesign.net/how-to-use-html-css-style-tiles-to-kickstart-your-design/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/7/ab/9e/how-to-use-html-css-style-tiles-to-kickstart-your-design_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://pl.odwebdesign.net/how-to-use-html-css-style-tiles-to-kickstart-your-design/">Jak używać płytek stylów HTML i CSS do rozpoczęcia projektowania</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://pl.odwebdesign.net/how-to-get-started-with-css-shapes/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/4/78/da/how-to-get-started-with-css-shapes_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://pl.odwebdesign.net/how-to-get-started-with-css-shapes/">Jak zacząć od kształtów CSS</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://pl.odwebdesign.net/3-cool-css3-image-hover-effects/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/f/6d/c6/3-cool-css3-image-hover-effects_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://pl.odwebdesign.net/3-cool-css3-image-hover-effects/">3 Cool CSS3 Image Hover Effects</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://pl.odwebdesign.net/css-you-can-get-excited-about-in-2015/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/1/9c/5c/css-you-can-get-excited-about-in-2015_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://pl.odwebdesign.net/css-you-can-get-excited-about-in-2015/">CSS, z którego możesz się ekscytować w 2015 roku</a>
                    </div>
                </div>
            </div>
                    </div>
        <div class="tab-pane" id="popular" role="tabpanel">
            
                            <div class="media"> <a href="https://pl.odwebdesign.net/whos-going-to-save-the-world-wide-web/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://pl.odwebdesign.net/whos-going-to-save-the-world-wide-web/">Kto uratuje World Wide Web?</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://pl.odwebdesign.net/why-typography-rules/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://pl.odwebdesign.net/why-typography-rules/">Dlaczego typografia jest największym formatem mediów w Internecie</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://pl.odwebdesign.net/why-developers-cannot-afford-to-ignore-design/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://pl.odwebdesign.net/why-developers-cannot-afford-to-ignore-design/">Dlaczego deweloperzy nie mogą sobie pozwolić na ignorowanie projektu</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://pl.odwebdesign.net/the-ultimate-html5-resource-guide/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://pl.odwebdesign.net/the-ultimate-html5-resource-guide/">Ostateczny przewodnik po zasobach HTML5</a>
                        </div>
                    </div>
                </div>
                    </div>
    </div>
</aside>
    
                                        
                                    </div>

            
        </div>
                <footer class="footer-bs">
            <div class="row">
                <div class="col-md-3 footer-brand animated fadeInLeft">
                    <img src="https://pl.odwebdesign.net/img/logo1n.png">
                                                        </div>


                <div class="col-md-9 footer-nav animated fadeInRight">
                    <ul class="list">
                        <li><a href="https://pl.odwebdesign.net/category/freebies/">Gratisy</a></li>
                        <li><a href="https://pl.odwebdesign.net/category/interactive-design/">Interaktywny projekt</a></li>
                        <li><a href="https://pl.odwebdesign.net/contact_us/">Skontaktuj się z nami</a> </li>
                    </ul>
                    <br>
                    <h4>OdWebDesign.Net</h4>
                </div>
            </div>

            
                <!-- Piwik -->
                <script type="text/javascript">
                    var _paq = _paq || [];
                    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
                    _paq.push(['trackPageView']);
                    _paq.push(['enableLinkTracking']);
                    (function() {
                        var u="//odwebdesign.net/";
                        _paq.push(["setTrackerUrl", u+"piwik.php"]);
                        _paq.push(["setSiteId", "470"]);
                        var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
                        g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.php"; s.parentNode.insertBefore(g,s);
                    })();
                </script>
                <!-- End Piwik Code -->
            

        </footer>
    </div><!-- /.container -->

      
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/dist/js/bootstrap.min.js"></script>
  </body>
</html>