Kanman skriva CSS så här?

7 svar · 1 036 visningar · startad av Matsakii 31 mars 2013

MatsakiiMedlem sedan mars 2005265 inlägg

Frågan31 mars 2013 19:44#1

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!

GildebrandMedlem sedan juni 2009920 inlägg

31 mars 2013 19:57#2

Tycker det där ser alldeles finemang ut (bortsett från formateringen...) :)

voigtann1Medlem sedan juni 20019 519 inlägg

31 mars 2013 19:59#3

Vilka webbläsare vill du ha stöd för?

MatsakiiMedlem sedan mars 2005265 inlägg

31 mars 2013 20:03#4

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 :)

nitro2k01Medlem sedan aug. 20039 340 inlägg

31 mars 2013 22:59#5

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.

MatsakiiMedlem sedan mars 2005265 inlägg

31 mars 2013 23:27#6

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 :)

nitro2k01Medlem sedan aug. 20039 340 inlägg

31 mars 2013 23:44#7

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.

voigtann1Medlem sedan juni 20019 519 inlägg

1 apr. 2013 13:09#8

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.