--- title: "Kanman skriva CSS så här?" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/191262-kanman-skriva-css-så-här" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "Matsakii" published: "2013-03-31T19:44:48.000Z" updated: "2013-04-01T13:09:29.000Z" replies: 7 views: 1064 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/191262-kanman-skriva-css-så-här" --- # Kanman skriva CSS så här? ## #1 — Matsakii, 2013-03-31T19:44Z Hej, Försöker mig på lite css. Gör en header bakgrund med rundade hörn och en gradient i. Jag har fått det att funka efter att ha använt olika verktyg för att få ihop gradient och rundade hörn. Men ska man skriva koden så här helt enkelt, eller har jag missat något? ``` .product_slider_mid { background-color: #FFFFFF; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIgc3RvcC1vcGFjaXR5PSIwLjc3Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIgc3RvcC1vcGFjaXR5PSIwLjg4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjg5Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(22,22,22,0.77) 0%, rgba(22,22,22,0.88) 48%, rgba(0,0,0,0.89) 52%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,0.77)), color-stop(48%,rgba(22,22,22,0.88)), color-stop(52%,rgba(0,0,0,0.89)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(22,22,22,0.77) 0%,rgba(22,22,22,0.88) 48%,rgba(0,0,0,0.89) 52%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(22,22,22,0.77) 0%,rgba(22,22,22,0.88) 48%,rgba(0,0,0,0.89) 52%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(22,22,22,0.77) 0%,rgba(22,22,22,0.88) 48%,rgba(0,0,0,0.89) 52%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(22,22,22,0.77) 0%,rgba(22,22,22,0.88) 48%,rgba(0,0,0,0.89) 52%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4161616', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ float: left; width: 710px; height: 37px; font-size: 16px; color: #FFFFFF; line-height: 37px; font-family: Georgia, "Times New Roman", Times, serif; text-transform: uppercase; padding-left: 40px; } ``` Tack på förhand! Permalänk: https://www.webforum.nu/p/191262 ## #2 — Gildebrand, 2013-03-31T19:57Z Tycker det där ser alldeles finemang ut (bortsett från formateringen...) :) Permalänk: https://www.webforum.nu/p/2308509 ## #3 — voigtann1, 2013-03-31T19:59Z Vilka webbläsare vill du ha stöd för? Permalänk: https://www.webforum.nu/p/2308510 ## #4 — Matsakii, 2013-03-31T20:03Z Tack men W3C ger mig 8 error på den kodensnutten? > Vilka webbläsare vill du ha stöd för? För så många webbläsare som möjligt :) Permalänk: https://www.webforum.nu/p/2308511 ## #5 — nitro2k01, 2013-03-31T22:59Z Låt os gå igenom felen: **12 .product_slider_mid Value Error : background url(data:image/svg+xml;base64,PD9 ... mc+) is an incorrect URL** Sätt enkelfnuttar runt base64-data, dvs ena fnutten innan data: **url('data: ...** och sista efter hela URL'en: **mc+')** **19 .product_slider_mid attempt to find a semi-colon before the property name. add it 19 .product_slider_mid Property progid doesn't exist : DXImageTransform 19 .product_slider_mid Parse Error DXImageTransform.Microsoft.gradient( startColorstr='#c4161616', endColorstr='#000000',GradientType=0 );** Dessa fel, samt resten av felen, får du stå ut med om de vill behålla stödet för antika IE-versioner. Bör dock inte skapa problem i andra webbläsare även om validatorn spyr upp syntaxen som nån annan hårboll. Ta bort denna rad, (åtminstone temporärt medan du validerar) och fixa URL-felet ovan, så validerar koden. Permalänk: https://www.webforum.nu/p/2308512 ## #6 — Matsakii, 2013-03-31T23:27Z Will try. Tack! "Parse Error" beror på något mellanslag man ska ta bort läste jag med. Man kan även flytta IE8 css till en annan css fil för att slippa dessa errors, men det verkar vara lite overkill :) Permalänk: https://www.webforum.nu/p/2308513 ## #7 — nitro2k01, 2013-03-31T23:44Z Nja. Du måste ju inte kör med kod som är valid så länge allt fungerar. (Puristerna komemr hata mig för att jag säger något sådant.) Men validering kan hjälpa dig att fånga fel som du kanske hade missat annars. Att jag rekommenderade att du skulle plocka bort IE-specifika reglerna under valideringen beror på att de skapar fel som egentligen inte existerar längre ner i koden, vilket kan vara förvirrande. I en annan situation kanske senare kod hade innehållit fel om du inte hade upptäckt för att validatorn inte ens tolkade den efterföljande koden som CSS-kod. Permalänk: https://www.webforum.nu/p/2308514 ## #8 — voigtann1, 2013-04-01T13:09Z CSS är byggt på det sättet om webbläsaren inte kan tolka det senaste så skrotar den det, att ha det i en egen CSS fil (med ett extra GET anrop mot servern kan känns lite överflödigt) så länge du vet varför du få felmeddelandet så är detta i mina ögon helt OK. Permalänk: https://www.webforum.nu/p/2308523 --- Tråden på webben: https://www.webforum.nu/amne/html-css/191262-kanman-skriva-css-så-här