Moderniyr Problem

Mitrović Srđan · 04. 07. 2011.

Pozdrav,
da li neko koristi modernizr ?
http://www.modernizr.com/

Posto su mi potrebne neke funkcije css3 za IE tipa font-face itd.
Koliko vidim prosto se doda skript u head i
<html lang="en" dir="ltr" id="ala-modernizr-sample" class="no-js">

medjutim meni se ne desava nista.
evo example code. Opet u IE ne sljaka

Kôd:

<!DOCTYPE html> 
<html lang="en" dir="ltr" id="ala-modernizr-sample" class="no-js"> 
<head> 
	<meta charset="utf-8"> 
	<title>My Beautiful Sample Page</title> 
	<script src="modernizr-1.1.js"></script> 
	<style type="text/css" media="screen"> 
		/* Thinnify type in Safari */
		body { -webkit-text-stroke:1px transparent; }
		@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}
 
		html,
		body {
			background: #ef8dbb;
			color: #141414;
			font: normal 14px/20px Helvetica, Verdana, Arial, sans-serif;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		a:link,
		a:visited {
			color: #941350;
			font-weight: bold;
		}
		a:visited {
			color: #666;
		}
		a:focus,
		a:hover {
			color: #e33a89;
			text-decoration: none;
		}
		img {
			vertical-align: bottom;
		}
		#content {
			background: #fafafa;
			border: 2px outset #666;
			margin: 20px auto 10px;
			padding: 40px 40px 20px;
			text-align: left;
			width: 500px;
		}
		#content h1+p {
			margin: 20px 0;
		}
		#content h1+p:first-line {
			font-weight: bold;
			font-variant: small-caps;
		}
		h1 {
			color: #e33a89;
			font: 27px/27px Baskerville, Palatino, Palatino Linotype, Book Antiqua, Georgia, serif;
			margin: 0;
			text-shadow: #aaa 5px 5px 5px;
		}
		section {
			float: right;
			text-align: justify;
			width: 200px;
		}
		section h2 {
			background: url(modernizr-logo.gif) 53px 5px no-repeat;
			margin: 0;
			height: 70px;
			text-indent: -9999px;
			width: 200px;
		}
		section p {
			font-size: 12px;
			line-height: 16px;
			margin: 0 0 20px;
			padding: 0 40px 0 0;
			width: 200px;
		}
		ol.features {
			font-size: 12px;
			line-height: 18px;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		p.download {
			font-size: 12px;
		}
		footer {
			font-size: 11px;
			font-style: oblique;
		}
		footer a {
			font-style: normal;
		}
	</style> 
</head> 
 
<body> 
 
	<div id="content"> 
		<h1>My Beautiful Sample Page</h1> 
		
		<p>New features in CSS3 and HTML5 allow web developers to build increasingly elegant websites using very clean and semantic markup. It offers them exciting features like localStorage, and using advanced CSS3 techniques to style it all. Sadly, it isn't quite as simple as that; the many different levels of support for all these features across the entire browser landscape has given many developers a headache. Since aspirin can't be distributed via https, alternative solutions had to be created. One such solution is Modernizr, a library that detects the availability of features in the current browser and makes that information available to the web developer.</p> 
 
		<section> 
			<h2>Modernizr</h2> 
			<p><a href="http://www.modernizr.com/" rel="external">Modernizr</a> is an open source JavaScript library that aims to make the process of using the latest and greatest technologies on the web a little easier. With Modernizr, you can target CSS and JavaScript specifically based on each feature the current browser supports.</p> 
		
			<img src="photo.jpg" width="200" height="300" alt="Photo of audience seats in an auditorium-like formation, resembling a 3-dimensional representation of the Modernizr logo."> 
		</section> 
 
		<p>Here is a list of the features Modernizr detects:</p> 
	
		<ol class="features"> 
			<li class="applicationcache">applicationCache</li> 
			<li class="borderimage">border-image:</li> 
			<li class="borderradius">border-radius:</li> 
			<li class="boxshadow">box-shadow:</li> 
			<li class="canvas">Canvas</li> 
			<li class="canvastext">Canvas Text</li> 
			<li class="csstransforms">CSS 2D Transforms</li> 
			<li class="csstransforms3d">CSS 3D Transforms</li> 
			<li class="cssanimations">CSS Animations</li> 
			<li class="csscolumns">CSS Columns</li> 
			<li class="cssgradients">CSS Gradients</li> 
			<li class="cssreflections">CSS Reflections</li> 
			<li class="csstransitions">CSS Transitions</li> 
			<li class="fontface">@font-face</li> 
			<li class="geolocation">Geolocation API</li> 
			<li class="hsla">hsla()</li> 
			<li class="audio">HTML5 Audio</li> 
			<li class="video">HTML5 Video</li> 
			<li class="input">Input Attributes</li> 
			<li class="inputtypes">Input Types</li> 
			<li class="localstorage">localStorage</li> 
			<li class="multiplebgs">Multiple backgrounds</li> 
			<li class="opacity">opacity:</li> 
			<li class="rgba">rgba()</li> 
			<li class="sessionstorage">sessionStorage</li> 
			<li class="webworkers">Web Workers</li> 
		</ol> 
	
		<p class="download"><a href="http://www.fontsquirrel.com/fonts/Beautiful-ES" rel="external">Download <cite>Beautiful ES</cite> on Fontsquirrel.com</a></p> 
	</div> 
	
	<footer>This page was created by <a href="http://farukat.es/" rel="external me">Faruk Ateş</a> for <a href="http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr">A List Apart issue 308</a></footer> 
	
</body> 
</html>

[nq] · 04. 07. 2011.

^ procitaj ti jos jedanput sta modernizr radi

Mitrović Srđan · 04. 07. 2011.

Koliko sam ja skontao on bi trebao da omoguci CSS3 svojstva browserima koji ih po defaultu nemaju tipa IE?

webarto · 04. 07. 2011.

Ne, služi samo za dijagnostiku, da li je taj browser to podržava...

Citat:

Modernizr tells you whether the current browser has implemented a given feature.

Mitrović Srđan · 04. 07. 2011.

Mhm nisam onda najbolje razumeo.
Da li postoji siguran nacin da korisitm font-face u IE?

Hvala unapred

webarto · 04. 07. 2011.

Uvijek imaš cufon http://cufon.shoqolate.com/generate/, ali ako nećeš koristiti kao body font već samo za headere itd. U čemu je problem sa IE uostalom?

Br@nkoR · 04. 07. 2011.

IE od verzije 4 podržava font-face, potrebno je da font bude u formatu *.eot
http://webfonts.info/wiki/index.php?...rowser_support

http://www.fontsquirrel.com/fontface/generator

chandler · 04. 07. 2011.

Da bi koristio font face, trebalo bi ovako nesto da dodas u css i izmenis:

Kôd:

@font-face {
    font-family: 'ArimoRegular';
    src: url('fonts/Arimo-Regular-Latin-webfont.eot');
    src: url('fonts/Arimo-Regular-Latin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Arimo-Regular-Latin-webfont.woff') format('woff'),
         url('fonts/Arimo-Regular-Latin-webfont.ttf') format('truetype'),
         url('fonts/Arimo-Regular-Latin-webfont.svg#ArimoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Pored ovoga, stavis sve ove fontove u fonts folder naravno. Ceo kit mozes skinuti ovde npr:

http://www.fontsquirrel.com/fonts/arimo

Ovi .eot fontovi su za ie. Mada gledaj da izaberes neki font sa linka gore, jer moze biti komplikovanije praviti sve ostale fontove, a i zbog licenci, jer ne znam za kakav projekat ti treba.

Evo procitaj i ovo: http://blog.themeforest.net/tutorial...-face-support/

A za podrsku css3 opcija, treba ti css3pie.com/.

Mitrović Srđan · 05. 07. 2011.

Hvala

Sa ovim .EOT trikom ili sta je vec sam se snasao i radi perfektno.

Hvala jos jednom

04. 07. 2011.	#2
[nq] web dude Grand Master Datum učlanjenja: 09.06.2005 Poruke: 912 Hvala: 46 24 "Hvala" u 21 poruka	^ procitaj ti jos jedanput sta modernizr radi __________________ polovni mobilni telefoni mali oglasi prodaja korišćenih aparata

04. 07. 2011.	#7
Br@nkoR banned Professional Datum učlanjenja: 04.06.2005 Poruke: 371 Hvala: 0 738 "Hvala" u 83 poruka	IE od verzije 4 podržava font-face, potrebno je da font bude u formatu .eot http://webfonts.info/wiki/index.php?...rowser_support http://www.fontsquirrel.com/fontface/generator __________________ Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with buls*t.” Poslednja izmena od Br@nkoR : 04. 07. 2011. u 17:21.*

04. 07. 2011.	#3
Mitrović Srđan profesionalac Qualified Datum učlanjenja: 20.04.2007 Lokacija: Majur/Sabac Poruke: 129 Hvala: 6 1 "Hvala" u 1 poruci	Koliko sam ja skontao on bi trebao da omoguci CSS3 svojstva browserima koji ih po defaultu nemaju tipa IE?

04. 07. 2011.	#6
webarto expert Grand Master Datum učlanjenja: 11.04.2010 Poruke: 998 Hvala: 141 959 "Hvala" u 153 poruka	Uvijek imaš cufon http://cufon.shoqolate.com/generate/, ali ako nećeš koristiti kao body font već samo za headere itd. U čemu je problem sa IE uostalom? __________________ Github // LinkedIn // PHP // ZCE // Stackoverflow PHP // Site5 Web Hosting

04. 07. 2011.	#8
chandler član Certified Datum učlanjenja: 30.01.2009 Poruke: 77 Hvala: 15 16 "Hvala" u 11 poruka	Da bi koristio font face, trebalo bi ovako nesto da dodas u css i izmenis: Kôd: @font-face { font-family: 'ArimoRegular'; src: url('fonts/Arimo-Regular-Latin-webfont.eot'); src: url('fonts/Arimo-Regular-Latin-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Arimo-Regular-Latin-webfont.woff') format('woff'), url('fonts/Arimo-Regular-Latin-webfont.ttf') format('truetype'), url('fonts/Arimo-Regular-Latin-webfont.svg#ArimoRegular') format('svg'); font-weight: normal; font-style: normal; } Pored ovoga, stavis sve ove fontove u fonts folder naravno. Ceo kit mozes skinuti ovde npr: http://www.fontsquirrel.com/fonts/arimo Ovi .eot fontovi su za ie. Mada gledaj da izaberes neki font sa linka gore, jer moze biti komplikovanije praviti sve ostale fontove, a i zbog licenci, jer ne znam za kakav projekat ti treba. Evo procitaj i ovo: http://blog.themeforest.net/tutorial...-face-support/ A za podrsku css3 opcija, treba ti css3pie.com/.

05. 07. 2011.	#9
Mitrović Srđan profesionalac Qualified Datum učlanjenja: 20.04.2007 Lokacija: Majur/Sabac Poruke: 129 Hvala: 6 1 "Hvala" u 1 poruci	Hvala Sa ovim .EOT trikom ili sta je vec sam se snasao i radi perfektno. Hvala jos jednom