CSS-vikoja ja epäjohdonmukaisuuksia Firefox 3.x: ssä

Ei ole olemassa monia artikkeleita, jotka kattavat yhteensopimattomuudet tai CSS-erot Firefoxissa yksin - ja hyvistä syistä.

Firefox on aina tehnyt erinomaisen hyvää työtä sekä CSS: n että JavaScriptin tukemiseksi standardien mukaisella tavalla ilman liian monta hankalia vikoja.

On kuitenkin olemassa muutamia CSS-ominaisuuksia ja valitsimia, joita ei ole tuettu yhdestä tai useammasta versiosta 3.0 julkaistusta versiosta.

Tämä artikkeli kattaa vikoja, epäjohdonmukaisuuksia ja ei tukea . Joten jos sinulla on ongelmia Firefoxin CSS-ominaisuuden tai valitsimen kanssa, eikä sitä ole lueteltu tässä, sinun on luultavasti harkittava uudelleen ulkoasua ja harkittava uudelleen mitä syyllinen voi olla.

Koska Firefox 2 on käytännössä olematon , En aio harkita tätä versiota erikseen, mutta nämä tiedot koskevat yleensä kyseistä versiota oletuksena.

Ja minun pitäisi huomata, että tämän viestin materiaali on otettu ensisijaisesti Äskettäin päivitetty SitePoint CSS-viittaus , joka on hands-down paras ja kattavin CSS-referenssi saatavilla missä tahansa.

Outline Overflow -virhe

Firefoxissa 3.x, kun elementti ylittää vanhempien rajan, jolla on outline ominaisuusasetus, ääriviiva venyttää sopivan sisällön mukaan, kuten näytön kaappauksessa esitetään alla:

Oikea toteutus näkyy seuraavassa Chromesta otetusta näytön kaappauksesta:

Kuten yllä on osoitettu, ääriviivojen tulisi kattaa elementti, jota hahmotellaan, eikä mitään ylivuotoelementtejä tule vaikuttaa. Varmistaaksesi sekaannuksen, huomaa, että tämä on vika ohjelman toteutuksessa outline omaisuutta, ei border omaisuutta.

Viite: SitePoint CSS-viite: ääriviivat Omaisuus

Taulukot, joissa on reunat

Firefoxissa, kun taulukon reunat on asetettu collapse käyttämällä border-collapse ominaisuus, taulukon ylä- ja vasen marginaalit suhteessa läheisiin elementteihin on 1 pikseli pois. Tämä näkyy alla olevassa kuvassa zoomatussa kuvakaappauksessa, joka näyttää lohkotason elementin (punainen) alarivin koskettamalla sarakkeen taulukon yläreunaa (sininen):

Tässä on tämän ominaisuus- / arvoparin oikea toteutus, kuten Chrome näyttää:

Kuten edellä on esitetty, koska rajat ovat "romahtaneet" ja koska taulukko ei ole lohkoelementti, vasemmalla reunalla olisi oltava hieman poikkeama, ja ylimmän marginaalin pitäisi olla edes sen yläpuolella olevan elementin alapäässä.

Viite: SitePoint CSS Reference: border-collapse Ominaisuus

Tyhjät solut taulukon rivissä

Tämä on ominaisuusarvo, jota jokin selaimesi ei tue oikein, kuten Firefox. Kun taulukkorivillä ei ole näkyvää sisältöä ja kaikki solut ovat niiden empty-cells ominaisuus asetettu hide , koko rivi tulee käyttäytyä, jos se asetettaisiin "display: none", ilman rajoja tai taustoja näkyvissä.

Selaimella ei käsitellä tätä oikein, joten taulukkorivi on edelleen näkyvissä, kuten alla olevassa kuvassa näkyy.

Viite: SitePoint CSS-viite: tyhjä-solujen ominaisuus

Sana välitys inline-elementeissä

Firefox 3.x: ssa negatiivinen arvo word-spacing omaisuutta käsitellään nollina vierekkäisillä inline-elementeillä. Negatiivisen arvon pitäisi aiheuttaa inline-elementit päällekkäin toistensa kanssa, kuten tekstit olisi, mutta tämä ei tapahdu. Sen sijaan elementtejä annetaan vain nollan valkoisen tilan erotukselle ilman päällekkäisyyksiä.

Alla oleva kuva näyttää sekä oikeat että virheelliset toteutukset:

Edellä esitetyissä esimerkeissä kolme sanaa "Hedelmät", "Vihannekset" ja "Muut elintarvikkeet" on kääritty yksittäin elementtejä, kun taas kappale, joka heittää ne, on sen word-spacing ominaisuus asetetaan negatiiviseksi arvoksi.

Toinen esimerkki (Firefox) ei käytä negatiivista sanaa, paitsi kahden viimeisen sanan välillä, koska kyseisiä sanoja ei ole kääritty yksittäin, vaan ovat luonnollisia tekstejä.

Sivupisteenä tämä virhe esiintyy samalla tavoin IE8: ssa, mutta ei aikaisemmissa IE-versioissa.

Viite: SitePoint CSS-viite: sanavarastoominaisuus

Tekstin koristelu kelluvien jälkeläisten kohdalla

Kun elementillä on teksti-decoration-arvo, tämä arvo ei saa periä kelluvia jälkeläisiä. Firefox 3.x: ssä kelluville jälkeläisille annetaan samat tekstin koristeluarvot kuin heidän vanhempansa, vaikka näin ei olisi.

Yllä olevassa kuvassa ensimmäinen rivi on kuvakaappaus IE8: sta, jossa on a elementti leijui ankkurin sisällä. Tekstin sisällä ei ole näkyvää tekstin koristelua, mikä on oikea tapa näyttää se. Firefoxissa (toisessa esimerkissä) teksti-decoration on virheellisesti sovellettu kelluvaan .

Olet ehkä huomannut tämän virheen Firefoxissa, kun yrität poistaa tekstikorin leikattujen kuvien sisältämistä ankkureista.

Viite: SitePoint CSS-viite: tekstin koristeluominaisuus

pre-line ja pre-wrap valkoisen tilan ominaisuuden FF 3.0

Käyttämällä white-space ominaisuus Firefox 3.5: ssa, voit määrittää, onko useita tilaa merkkejä laskettava yhdelle tai useammalle tilalle. Oletusarvoisesti HTML-dokumentit romahtavat useita tiloja yhdelle tilalle. Joissakin tapauksissa voit hakea white-space: pre jotta vältytään tyhjältä tilaa romahtavalta, joka on samanlainen kuin

  HTML-tunniste.  Tämän jälkeen voit poistaa tämän asetuksen käyttämällä white-space:  pre-line  (tyhjän tilan tyhjentäminen). 
  Firefox 3.0 ei tue tätä arvoa, joten valkoinen tila säilyy.  Firefox 3.5 sulkee tilan oikein.  Alla oleva kuva esittää molemmat esimerkit: 
  Samoin, kun tekstin kohta on asetettu white-space:  pre-wrap  , tämän pitäisi säilyttää valkoiset välilyönnät sanojen välillä, mutta luonnollisesti olisi myös rivejä.  Firefox 3.0 ei toteuta tätä oikein, kun taas myöhemmät versiot (ja kaikki muut selaimet) sisältävät luonnolliset rivit.  Molemmat esimerkit on esitetty alla. 
  Muista, että ulkoinen elementti on annettu white-space: pre  kun taas sisempi   yrittää ohittaa viivatahtien puutteen käyttämällä pre-wrap  .  Omillaan, pre-wrap  ei olisi mitään vaikutusta. 
  Firefox 3.x käsittelee myös joitain white-space  arvot eri tavoin kuin muut selaimet, kun näitä arvoja sovelletaan </code>  elementti.  Esimerkiksi hakeminen <code>white-space:  nowrap</code>  pitäisi aiheuttaa kaiken kirjoitetun tekstin a <code><textarea></code>  muodostamaan yhden rivin, mutta Firefox 3.x ei tee tätä. </p><p>  <strong>Viite:</strong> <a href="http://reference.sitepoint.com/css/white-space" class=external rel=nofollow>SitePoint CSS Reference: white-space -ominaisuus</a></p><ul></ul><p class=clearrow></p><h2>  Page Break-ominaisuudet </h2><p>  CSS: n avulla kehittäjät voivat määrittää, millä sivujesi on tai ei pitäisi tapahtua kolmen ominaisuuden avulla <code>page-break-before</code>  , <code>page-break-inside</code>  , ja <code>page-break-after</code>  .  Opera on ainoa selain, joka tukee täysin näitä ominaisuuksia, kun taas muut selaimet tarjoavat osittaista tukea tai tukea. </p><p> </span> <code>page-break-inside</code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">property specifies whether or not a page break can occur inside a single block-level element. ominaisuus määrittää, voidaanko sivun katkeaminen esiintyä yksittäisen lohkotason elementin sisällä.</span>  Firefox ei tue tätä ominaisuutta.  Syntaksin käyttäminen <code>page-break-inside:  avoid</code>  , voit estää elementin jakamisen tulostuksen aikana.  Alla oleva kuva Opera 10: n esikatselusta näyttää, miten tämä ominaisuus voi estää järjestämättömän luettelon jakamisen kahdelle sivulle: </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>  Katso sen sijaan alla oleva kuva, joka otetaan Firefox 3.5: n esikatseluasetuksesta: </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>Viite:</strong> <a href="http://reference.sitepoint.com/css/pagedmedia" class=external rel=nofollow>SitePoint CSS -viite: Paged Media Properties</a></p><ul></ul><p class=clearrow></p><h2>  Orpoja ja leskiä tulostavilla sivuilla </h2><p> </span> <code>orphans</code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">and ja</span> <code>widows</code>  CSS-ominaisuuksia tuetaan vain Internet Explorer 8: ssa ja Opera-versiossa 9 lähtien. Tätä ominaisuutta käytetään määrittämään yksittäisen kappaleen rivien vähimmäismäärä, joka voi esiintyä tulostetulla sivulla joko alhaalla (orpoilla) tai ylhäällä ).  Valitusta numerosta riippuen rivejä siirretään yhdestä sivusta seuraavaan (tai edelliseen), jotta yksi rivi ei tulostu sivun ylä- tai alaosaan. </p><p>  Jopa kanssa <code>orphans</code>  ominaisuus asetettu arvoon "3", kuten alla olevassa kuvassa näkyy, Firefoxin esikatselussa näkyy yksi rivi jonkin tulostettavan sivun alareunassa: </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>  Samanlainen kuin <code>page-break-inside</code>  ominaisuus, Firefox ei myöskään tue arvoja <code>avoid</code>  , <code>left</code>  , ja <code>right</code>  sekä <code>page-break-before</code>  ja <code>page-break-after</code>  ominaisuudet. </p><p>  <strong>Viitteet:</strong> <a href="http://reference.sitepoint.com/css/orphans" class=external rel=nofollow>SitePoint CSS-viite: orpojen omaisuus</a>  | <a href="http://reference.sitepoint.com/css/widows" class=external rel=nofollow>SitePoint CSS -viite: leskiä Ominaisuus</a></p><ul></ul><p class=clearrow></p><h2>  Ensimmäinen rivi Pseudo-element bug </h2><p> </span> <code>:first-line</code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">pseudo-element allows the first line of any given text block to have different formatting from the rest of the text. pseudo-elementti mahdollistaa minkä tahansa tekstilohkon ensimmäisen rivin erilaisen muotoilun muusta tekstistä.</span>  Esimerkiksi tekstin kohdan ensimmäinen rivi voidaan vaihtaa isoksi tai eri väreiksi.  Jotta tämä CSS-elementti toimisi käytännöllisesti, sen pitäisi mahdollistaa sisäkkäisten lohkotason elementtien mahdollisuus.  Esimerkiksi a <code><div></code>  elementti, joka sisältää a <code><p></code>  elementin pitäisi sallia <code>:first-line</code>  pseudo-elementti muuttaa tekstin ensimmäisen rivin muotoilua <code><div></code>  .  Firefoxissa (ja monissa muissa selaimissa) tämä ei ole mahdollista, paitsi jos pseudo-elementti kohdistuu nimenomaan lapsen kappaleeseen. </p><p>  Internet Explorer 8, Chrome ja Safari toteuttavat tämän ominaisuuden oikein estämällä lohkoelementtien pesiytymisen rikkomasta muotoilua, kuten alla olevassa kuvassa näkyy: </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>  Edellä olevassa kappaleessa teksti on sisällä a <code><p></code>  elementti, joka sijaitsee a: n sisällä <code><div></code>  . </span> <code><p></code> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">has the on</span> <code>:first-line</code>  pseudo-elementti asetettu <code>color:  blue</code>  , joka epäonnistuu Firefoxissa, koska kappaleen pesu on <code><div></code>  . </p><p>  <strong>Viite:</strong> <a href="http://reference.sitepoint.com/css/pseudoelement-firstline" class=external rel=nofollow>SitePoint CSS-viite: ensimmäisen rivin pseudo-elementti</a></p><ul></ul><p class=clearrow></p><h2>  CSS3-tuki Firefox 3.x: ssä </h2><p>  Firefox on vähitellen lisännyt parempaa tukea CSS3: lle versio 3.0: n julkaisun jälkeen.  Alla on kuvaus siitä, miten Firefox käsittelee CSS3: n eri ominaisuuksia.  Jotkut näistä voivat silti olla <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsWD" class=external rel=nofollow>työskentelyluonnos</a>  tai <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsCR" class=external rel=nofollow>ehdokasohje</a>  vaiheessa, emmekä voi olla dogmaattinen siitä, mitä pitäisi ja jota ei pitäisi tukea, ennen kuin he ovat päässeet <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsW3C" class=external rel=nofollow>suositus</a>  vaiheessa. </p><ul><li>  Firefox 3.0 ei tue <code>text-shadow</code>  omaisuus </li><li>  Firefox 3.x ei tue <code>box-shadow</code>  omaisuutta, paitsi jos käytetään etuoikeutta <code>-moz-</code></li><li>  Firefox 3.x ei tue <code>box-sizing</code>  omaisuutta, paitsi jos käytetään etuoikeutta <code>-moz-</code></li><li>  Firefox 3.x ei tue useita sarakkeita, ellei käyttöoikeuden etuliite ole <code>-moz-</code>  käytetään </li><li>  Firefox 3.0 ja 3.5 eivät tue CSS3-kaltevuuksia ja useita taustoja (molemmat on lisätty hiljattain 3.6) </li><li>  Firefox 3.0 ei tue <code>border-image</code>  mutta 3.5 tukee sitä käyttämällä <code>-moz-</code>  oma etuliite </li><li>  Firefox 3.0 ei tue useita CSS3-näennäisluokkia (: nth-child, nth-last-child, nth-of-type jne.) </li><li>  Firefox 3.0 ei tue CSS-muunnoksia </li><li>  Firefox 3.x ei tue CSS-siirtymiä </li><li>  Firefox 3.x ei tue CSS-animaatioita </li></ul><p class=clearrow></p><h2>  Muut CSS-ominaisuudet eivät ole tuettuja </h2><p>  Joitakin merkittävämpiä vikoja ja yhteensopimattomuuksia käsiteltiin edellä, mutta muutamia muita on syytä mainita. </p><ul><li>  Firefoxin versioon 3.5 ei tue arvoa <code>run-in</code>  varten <code>display</code>  omaisuus </li><li>  Firefox ei tue <code>::selection</code>  pseudo-elementti </li><li>  Firefox ei tue @-sivua-sääntöä </li><li>  Firefox 3.0 ei tue @ font-face at-sääntöä </li></ul><p class=clearrow></p><h2>  johtopäätös </h2><p>  Tämän materiaalin läpi voit selkeästi nähdä, että <strong>Firefoxin CSS-ominaisuuksien puute on vähäistä ja monissa tapauksissa melko merkityksetön,</strong> koska monet tässä käsitellyistä ominaisuuksista eivät ole kovin yleisesti käytössä. </p><p>  Toivon kuitenkin, että tämä tarjoaa hyvän ohjeen Firefoxin merkittävimpiin vikoihin ja epäjohdonmukaisuuksiin.  Jos sinulla on ongelmia tietyn CSS-ominaisuuden kanssa Firefoxissa, jota ei ole tässä luettelossa, on mahdollista, että teet jotain vikaa tai et välttämättä ymmärrä täysin tiettyjä CSS-konsepteja ja periaatteita. </p><p>  Joten tässä suhteessa tämän viittauksen <strong>pitäisi toimia hyvin käänteissuosituksina</strong> , koska niitä, joita ei ole lueteltu tässä, voidaan luottaa toimimaan hyvin, jos ne toteutetaan oikein oikealla syntaksilla. </p><p>  Tietenkin, jos jotain mitä olen unohtanut tai virheitä, ole hyvä ja kommentoi, ja teen parhaani tekemään tarvittavat korjaukset ja lisäykset. </p><p class=clearrow></p><h2>  Muita viitteitä </h2><ul class=tight_list><li><a href="https://developer.mozilla.org/En/CSS_improvements_in_Firefox_3" class=external rel=nofollow>CSS: n parannukset Firefox 3: ssa</a></li><li><a href="https://developer.mozilla.org/En/Firefox_3.5_for_developers#Newly-supported_CSS_features" class=external rel=nofollow>Uudet tuetut CSS-ominaisuudet Firefoxissa 3.5</a></li></ul><p><br class=spacer_ /></p><p>  <em>Firefoxin tarjoama kuva</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>Tämä viesti kirjoitettiin yksinomaan Webdesigner Depotille, freelance-kirjailija ja web-kehittäjä Louis Lazaris.</em>  <em>Louis juoksee</em> <em><a rel=nofollow href="http://www.impressivewebs.com/" class=external></em>  <em>Vaikuttavat webs</em></a>  <em>jossa hän lähettää artikkeleita ja tutoriaaleja web-suunnittelussa.</em>  <em>Voit seurata Louisia</em> <em><a rel=nofollow href="http://twitter.com/ImpressiveWebs" class=external></em>  <em>Twitterissä</em></a>  <em>tai ota yhteyttä häneen</em> <em><a rel=nofollow href="http://www.impressivewebs.com/contact" class=external></em>  <em>hänen verkkosivuillaan</em></a>  <em>.</em> </p><p><br class=spacer_ /></p>


        <div class="bootstrap-tagsinput">
                        <span class="tag label label-info"><a href="https://fi.odwebdesign.net/tag/css/">css</a> </span>
                        <span class="tag label label-info"><a href="https://fi.odwebdesign.net/tag/firefox/">firefox</a> </span>
                        <span class="tag label label-info"><a href="https://fi.odwebdesign.net/tag/bugs/">Bugs</a> </span>
                        <span class="tag label label-info"><a href="https://fi.odwebdesign.net/tag/css-bugit/">css bugit</a> </span>
                        <span class="tag label label-info"><a href="https://fi.odwebdesign.net/tag/firefox-3/">firefox 3</a> </span>
                        <span class="tag label label-info"><a href="https://fi.odwebdesign.net/tag/firefox-virheitae/">Firefox virheitä</a> </span>
                        <span class="tag label label-info"><a href="https://fi.odwebdesign.net/tag/inconsitencies/">inconsitencies</a> </span>
                    </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="pager">
            
            <li class="previous"><a href="https://fi.odwebdesign.net/fight-div-itis-and-class-itis-with-the-960-grid-system/">← Fight Div-Itis ja Class-Itis 960-grid-järjestelmällä</a></li>            
            <li class="next"><a href="https://fi.odwebdesign.net/wordpress-vs-expressionengine-apples-and-oranges/">WordPress Vs.  ExpressionEngine: omenat ja appelsiinit? →</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">Viimeaikainen</a> </li>
        <li> <a data-toggle="tab" href="#popular" role="tab">Paras</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://fi.odwebdesign.net/the-secret-power-of-bookmarklets/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://fi.odwebdesign.net/the-secret-power-of-bookmarklets/">Kirjanmerkkien salainen voima</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://fi.odwebdesign.net/html5-and-css3-wireframing-in-the-final-product/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://fi.odwebdesign.net/html5-and-css3-wireframing-in-the-final-product/">HTML5 ja CSS3: Wireframing lopputuotteessa</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://fi.odwebdesign.net/5-incredible-hosted-cms-reviewed/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://fi.odwebdesign.net/5-incredible-hosted-cms-reviewed/">5 Incredible Hosted CMS "Tarkastettu</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://fi.odwebdesign.net/exclusive-free-icons-appliance-icons/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/b/b7/66/exclusive-free-icons-appliance-icons_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://fi.odwebdesign.net/exclusive-free-icons-appliance-icons/">Exclusive Free kuvakkeet: "Appliance Icons"</a>
                    </div>
                </div>
            </div>
                    </div>
        <div class="tab-pane" id="popular" role="tabpanel">
            
                            <div class="media"> <a href="https://fi.odwebdesign.net/so-can-we-use-css-variables-yet/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/3/17/69/so-can-we-use-css-variables-yet_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://fi.odwebdesign.net/so-can-we-use-css-variables-yet/">Voimmeko käyttää CSS-muuttujia vielä?</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://fi.odwebdesign.net/11-experimental-css-projects-thatll-blow-your-mind/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/4/63/23/11-experimental-css-projects-thatll-blow-your-mind_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://fi.odwebdesign.net/11-experimental-css-projects-thatll-blow-your-mind/">11 kokeellisia CSS-projekteja, jotka räjäyttävät mielesi</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://fi.odwebdesign.net/7-ways-a-design-kit-or-template-can-save-your-project/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/3/e5/ab/7-ways-a-design-kit-or-template-can-save-your-project_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://fi.odwebdesign.net/7-ways-a-design-kit-or-template-can-save-your-project/">7 tapaa, jolla malli tai malli voi säästää projektia</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://fi.odwebdesign.net/7-tools-for-developing-your-first-progressive-web-app/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/0/a3/33/7-tools-for-developing-your-first-progressive-web-app_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://fi.odwebdesign.net/7-tools-for-developing-your-first-progressive-web-app/">7 Työkaluja ensimmäisen progressiivisen Web-sovelluksen kehittämiseen</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://fi.odwebdesign.net/img/logo1n.png">
                                                        </div>


                <div class="col-md-9 footer-nav animated fadeInRight">
                    <ul class="list">
                        <li><a href="https://fi.odwebdesign.net/category/freebies/">ilmaisohjelmia</a></li>
                        <li><a href="https://fi.odwebdesign.net/category/interactive-design/">Interaktiivinen muotoilu</a></li>
                        <li><a href="https://fi.odwebdesign.net/contact_us/">Ota meihin yhteyttä</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>