|
|
Mitrović Srđan |
04. 07. 2011. 01:58 |
Moderniyr Problem
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>
|
^ procitaj ti jos jedanput sta modernizr radi
|
Mitrović Srđan |
04. 07. 2011. 14:05 |
Koliko sam ja skontao on bi trebao da omoguci CSS3 svojstva browserima koji ih po defaultu nemaju tipa IE?
|
webarto |
04. 07. 2011. 14:32 |
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. 16:31 |
Mhm nisam onda najbolje razumeo.
Da li postoji siguran nacin da korisitm font-face u IE?
Hvala unapred
|
webarto |
04. 07. 2011. 16:53 |
|
Br@nkoR |
04. 07. 2011. 17:19 |
|
chandler |
04. 07. 2011. 18:32 |
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. 01:45 |
Hvala :)
Sa ovim .EOT trikom ili sta je vec sam se snasao i radi perfektno.
Hvala jos jednom
|
Vreme je GMT +2. Trenutno vreme je 00:47. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.