home *** CD-ROM | disk | FTP | other *** search
/ PC World 2004 January / PCWorld_2004-01_cd.bin / Novinky / Interval / clanek06.htm < prev    next >
Encoding:
Extensible Markup Language  |  2003-12-04  |  23.7 KB  |  302 lines
  1. <?xml version='1.0' encoding='windows-1250'?>
  2. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='cs' lang='cs'>
  4. <head>
  5. <meta http-equiv='Content-Type' content='text/html; charset=windows-1250' />
  6. <meta http-equiv='Content-language' content='cs' />
  7. <meta http-equiv='Cache-control' content='no-cache' />
  8. <meta http-equiv='Pragma' content='no-cache' />
  9. <meta http-equiv='Expires' content='0' />
  10. <meta name='robots' content='index, follow' />
  11. <meta name='description' content='Interval.cz - Internetov² magazφn o webdesignu, v²voji webov²ch aplikacφ a e-komerci. VÜe podstatnΘ o technologiφch XHTML, HTML, CSS, DHTML, JavaScript, XML, .NET, ASP, PHP, Java, J2ME, SQL, WAP...' />
  12. <meta name='keywords' content='Interval' />
  13. <meta http-equiv='imagetoolbar' content='no' />
  14. <meta http-equiv='MSThemeCompatible' content='no' />
  15. <meta name='MSSmartTagsPreventParsing' content='true' />
  16. <title>Interval.cz - denn∞ o tvorb∞ webu a e-komerci</title>
  17. <style media='all' type='text/css'>
  18. @import '__services/styles/interval_articles.css';
  19. </style>
  20. </head>
  21. <body class='interval interval-articles'>
  22. <div id='page-header'><div id='interval-logo'><h1 title='Interval.cz - denn∞ o tvorb∞ webu a e-komerci (logo & index link)'><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Interval.cz<span></span></a></h1></div><div id='advertising-page-header'></div><div class='page-maker'> </div></div>
  23. <div id='page-topmenu'><h2 class='textversion'>Navigace</h2><div id='page-mainmenu'><h3 class='textversion'>Hlavnφ menu</h3><ul><li class='first selected'><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz'>Titulnφ strana</a></li><li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=14'>Webdesign</a></li><li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=15'>V²voj aplikacφ</a></li><li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=18'>E-komerce</a></li><li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=17'>Nßstroje</a></li><li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz?idcategory=16'>Magazφn</a></li><li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://diskuse.interval.cz'>Diskusnφ f≤rum</a></li><li class='right'><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.inshop.cz'>Knihkupectvφ</a></li></ul></div><div id='page-mainmenu-maker'> </div></div>
  24. <div id='page-body'><div id='page-left'><div id='article'>
  25.  
  26.  
  27.  
  28. <h2>CSS2 - podpora kaskßdov²ch styl∙ v sedmiΦkovΘ °ad∞ Opery</h2>
  29. <p id='prepend'>P°ed delÜφ dobou vychßzel zde na Intervalu serißl o norm∞ CSS2, kterß znaΦn²m zp∙sobem rozÜi°uje mo₧nosti p∙vodnφch kaskßdov²ch styl∙. SouΦßstφ ka₧dΘho dφlu byla i tabulka demonstrujφcφ podporu jednotliv²ch vlastnostφ CSS2 v r∙zn²ch prohlφ₧eΦφch. Tento Φlßnek doplnφ tyto informace o podporu CSS2 v sedmiΦkovΘ °ad∞ Opery.</p>
  30.  
  31.  
  32. <p>Pokud jste p∙vodnφ serißl o CSS2 pozorn∞ sledovali, asi vßm neuÜlo, ₧e u₧ starÜφ Opera 6.x m∞la mnohem lepÜφ podporu druhΘ verze kaskßdov²ch styl∙ ne₧ nejpou₧φvan∞jÜφ Internet Explorer. Podφvejme se, nakolik se tato podpora jeÜt∞ vylepÜila v novΘ °ad∞ Opery. Testovßnφ prob∞hlo v Ope°e 7.22 na platform∞ Windows.</p>
  33.  
  34. <h3>Selektory</h3>
  35. <p>Zßkladem kaskßdov²ch styl∙ je bezesporu mechanismus selektor∙ umo₧≥ujφcφ jednoznaΦn∞ definovat elementy, na kterΘ se bude aplikovat p°φsluÜn² styl. O nov²ch selektorech normy CSS2 se doΦtete ve Φlßnku <a href='http://interval.cz/clanek.asp?article=1778' title='Dudek, Jan: CSS2 û selektory, pseudot°φdy a pseudoelementy'>CSS2 û selektory, pseudot°φdy a pseudoelementy</a>. Opera je 7.22 vÜechny zvlßdß na jedniΦku: </p>
  36.  
  37. <div class='table'>
  38. <table cellspacing='0'>
  39. <tr><th>selektor</th><th>syntaxe</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  40. <tr><td>univerzßlnφ selektor</td><td>*A</td><td>vÜechny elementy</td><td>x</td></tr>
  41. <tr><td>typov² selektor</td><td>A</td><td>vÜechny elementy A</td><td>x</td></tr>
  42. <tr><td>selektor t°φdy</td><td>A.trida</td><td>vÜechny elementy A s atributem <samp>class="trida"</samp></td><td>x</td></tr>
  43. <tr><td>ID selektor</td><td>A#mujid</td><td>element A s jedineΦn²m identifikßtorem <samp>id="mujid"</samp></td><td>x</td></tr>
  44. <tr><td>selektor nßslednφka</td><td>A B</td><td>vÜechny elementy B, kterΘ jsou uvnit° elementu A</td><td>x</td></tr>
  45. <tr><td>selektor dφt∞te</td><td>A>B</td><td>vÜechny elementy B, kterΘ jsou dφt∞tem elementu A</td><td>x</td></tr>
  46. <tr><td>selektor p°φmΘho sourozence</td><td>A+B</td><td>vÜechny elementy B, kterΘ majφ stejnΘho rodiΦe jako A jsou v dokumentu hned za nφm</td><td>x</td></tr>
  47. <tr><td>atributovΘ selektory</td><td>A[atr]</td><td>vÜechny elementy A, kterΘ majφ nastaven² atribut atr na libovolnou hodnotu</td><td>x</td></tr>
  48. <tr><td>atributovΘ selektory</td><td>A[atr=hod]</td><td>vÜechny elementy A, kterΘ majφ nastaven² atribut atr na hodnotu hod</td><td>x</td></tr>
  49. <tr><td>atributovΘ selektory</td><td>A[atr~=hod]</td><td>vÜechny elementy A, jejich₧ atribut atr je tvo°en slovy odd∞len²mi mezerami a jedno slovo je rovno hod</td><td>x</td></tr>
  50. <tr><td>atributovΘ selektory</td><td>A[atr|=hod]</td><td>vÜechny elementy A, jejich₧ atribut atr zaΦφnß hod, pokraΦuje pomlΦkou a dalÜφmi znaky</td><td>x</td></tr>
  51. </table>
  52. </div>
  53.  
  54. <p>Selektory se dßle dajφ rozÜi°ovat o pseudo-t°φdy a pseudo-elementy. Jejich podporu prezentuje nßsledujφcφ tabulka: </p>
  55.  
  56. <div class='table'>
  57. <table cellspacing='0'>
  58. <tr><th>pseudo-t°φda/pseudo-element</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  59. <tr><td>:link</td><td>nenavÜtφven² odkaz</td><td>x</td></tr>
  60. <tr><td>:visited</td><td>navÜtφven² odkaz</td><td>x</td></tr>
  61. <tr><td>:hover</td><td>nad elementem je kurzor</td><td>x</td></tr>
  62. <tr><td>:active</td><td>element je aktivovßn</td><td>x</td></tr>
  63. <tr><td>:focus</td><td>element je zam∞°en (focused)</td><td>-</td></tr>
  64. <tr><td>:lang(jazyk)</td><td>element je napsßn v danΘm jazyce</td><td>-</td></tr>
  65. <tr><td>:first-child</td><td>element je prvnφm dφt∞tem jinΘho elementu</td><td>x</td></tr>
  66. <tr><td>:first-letter</td><td>prvnφ pφsmeno elementu</td><td>x</td></tr>
  67. <tr><td>:first-line</td><td>prvnφ °ßdek elementu</td><td>x</td></tr>
  68. <tr><td>:before</td><td>mφsto p°ed elementem</td><td>x</td></tr>
  69. <tr><td>:after</td><td>mφsto za elementem</td><td>x</td></tr>
  70. </table>
  71. </div>
  72.  
  73. <p>I zde podporuje Opera 7.22 vÜechny d∙le₧itΘ pseudo-t°φdy a pseudo-elementy. Nezvlßdß pouze jazykovou pseudo-t°φdu. Pseudo-t°φda <samp>:focus</samp> je v Ope°e zbyteΦnß, proto₧e nemß ₧ßdn² mechanismus, jak p°edßvat focus jednotliv²m element∙m. Opera podobn∞ jako Mozilla sprßvn∞ interpretuje dynamickΘ pseudo-t°φdy <samp>:hover</samp> a <samp>:active</samp> a umo₧≥uje je aplikovat na libovolnΘ elementy, ne pouze na odkazy, jak se domnφvajφ v²vojß°i z Microsoftu.</p>
  74.  
  75. <h3>@pravidla</h3>
  76. <p>ZavinßΦovß pravidla dßle rozÜi°ujφ kaskßdovΘ styly o dalÜφ funkce. Umo₧≥ujφ import styl∙, jejich cφlenφ na urΦitß mΘdia, nastavenφ tisknutelnΘ oblasti a definici vlastnφch font∙. Vφce se o nich doΦtete ve Φlßnku <a href='http://interval.cz/clanek.asp?article=1805' title='Dudek, Jan: CSS2 û at rules aneb pravidla zavinßΦe'>CSS2 û at rules aneb pravidla zavinßΦe</a>. Jejich podporu znßzor≥uje tato tabulka: </p>
  77.  
  78. <div class='table'>
  79. <table cellspacing='0'>
  80. <tr><th>@pravidlo</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  81. <tr><td>@import "styl.css";</td><td>importuje styl.css</td><td>x</td></tr>
  82. <tr><td>@import "styl.css" media;</td><td>na za°φzenφ odpovφdajφcφ media importuje styl.css</td><td>x</td></tr>
  83. <tr><td>@media media {}</td><td>styl ve slo₧en²ch zßvorkßch bude aplikovßn pouze na danΘm za°φzenφ</td><td>x</td></tr>
  84. <tr><td>@fontface {}</td><td>definice novΘho fontu</td><td>-</td></tr>
  85. <tr><td>@page {}</td><td>nastavenφ tisknutelnΘ oblasti</td><td>x</td></tr>
  86. </table>
  87. </div>
  88.  
  89. <p>Importovßnφ i cφlenφ styl∙ zvlßdß Opera 7.22 bez problΘm∙, naopak nezvlßdß technologii stahovateln²ch font∙. O vyu₧itφ @pravidla <samp>@page</samp> se dozvφte v nßsledujφcφch odstavcφch.</p>
  90.  
  91. <h3>Nastavenφ tisknutelnΘ oblasti</h3>
  92. <p>Pomocφ vlastnostφ uveden²ch uvnit° @pravidla <samp>@page</samp> lze ovlivnit <a href='http://interval.cz/clanek.asp?article=1811' title='Dudek, Jan: CSS2 - pravidlo strßnky'>nastavenφ tisknutelnΘ oblasti</a>. Opera 7.22 umo₧≥uje tato nastavenφ: </p>
  93.  
  94. <div class='table'>
  95. <table cellspacing='0'>
  96. <tr><th>mo₧nost/vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  97. <tr><td>margin-left,...</td><td>okraje tisknutelnΘ oblasti</td><td>x</td></tr>
  98. <tr><td>size</td><td>velikost tisknutelnΘ oblasti, resp. orientace dokumentu</td><td>x</td></tr>
  99. <tr><td>strßnkovΘ pseudo-t°φdy :first, :left, :right</td><td>pseudo-t°φdy pro prßci s lev²mi, resp. prav²mi strßnkami a titulnφ strßnkou</td><td>ΦßsteΦn∞</td></tr>
  100. <tr><td>@page jmeno_stranky {}</td><td>pojmenovanΘ strßnky</td><td>-</td></tr>
  101. </table>
  102. </div>
  103.  
  104. <p>Jak vidφte, Opera 7.22 zvlßdß mo₧nosti @pravidla <samp>@page</samp> tak nap∙l. Podporuje nastavenφ okraj∙, velikosti a orientace tisknutelnΘ oblasti. U₧ p∙vodnφ Üestkovß Opera m∞la znaΦnΘ problΘmy se strßnkov²mi pseudo-t°φdami, sedmiΦkovß verze se pouΦila pouze ΦßsteΦn∞. Pro levΘ a pravΘ strßnky lze zvlßÜ¥ nastavit okraje vlastnostφ <samp>margin</samp>, ale nikoliv velikost (resp. orientaci) pomocφ <samp>size</samp>. Navφc jsem p°i testovßnφ asi narazil na bug, pokud pou₧ijete strßnkovou pseudo-t°φdu <samp>:first</samp>, tak nejen ₧e ji Opera neznß, ale navφc nesmysln∞ zaΦne ignorovat i pseudo-t°φdy levΘ a pravΘ strßnky.</p>
  105. <p>Zde tedy Opera 7.22 zrovna nep°esv∞dΦila, budi₧ jφ ke cti, ₧e nejd∙le₧it∞jÜφ nastavenφ, tj. r∙znΘ okraje pro levΘ a pravΘ strßnky, zvlßdß bez problΘmu.</p>
  106.  
  107. <h3>Generovan² obsah</h3>
  108. <p>Druhß verze kaskßdov²ch styl∙ nßm umo₧≥uje vklßdat do v²slednΘho dokumentu dalÜφ obsah, nap°. text, obsah atribut∙ nebo Φφslovßnφ, na zaΦßtek, resp. konec elementu pomocφ zmφn∞n²ch pseudo-element∙ <samp>:before</samp> a <samp>:after</samp>. TakΘ lze elementu nastavit sprßvnΘ uvozovky, kterΘ se pak okolo n∞j budou automaticky dopl≥ovat. O generovanΘm obsahu pojednßvß Φlßnek <a href='http://interval.cz/clanek.asp?article=1828' title='Dudek, Jan: CSS2 û automaticky generovan² obsah'>CSS2 û automaticky generovan² obsah</a>. Podporu v Ope°e zjistφte z nßsledujφcφ tabulky: </p>
  109.  
  110. <div class='table'>
  111. <table cellspacing='0'>
  112. <tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  113. <tr><td>content: "°et∞zec"</td><td>vlo₧φ °et∞zec na zaΦßtek/konec elementu</td><td>x</td></tr>
  114. <tr><td>content: url("jmeno_souboru")</td><td>vlo₧φ obsah zadanΘho souboru</td><td>x</td></tr>
  115. <tr><td>content: attr(atr)</td><td>vlo₧φ obsah zadanΘho atributu</td><td>x</td></tr>
  116. <tr><td>content: open_quote (close_quote)</td><td>vlo₧φ otevφrajφcφ/uzavφrajφcφ uvozovku</td><td>x</td></tr>
  117. <tr><td>quotes: seznam_uvozovek</td><td>definice r∙zn²ch uvozovek pro zano°enΘ elementy</td><td>x</td></tr>
  118. <tr><td>Φφslovßnφ</td><td>vklßdßnφ Φφslovßnφ, vno°enΘ Φφslovßnφ,...</td><td>x</td></tr>
  119. </table>
  120. </div>
  121.  
  122. <p>V p°φpad∞ generovanΘho Φφslovßnφ nemßm k Ope°e 7.22 ₧ßdnΘ nßmitky. Bez problΘm∙ zvlßdß vklßdßnφ jakΘhokoliv obsahu p°ed a za element a problΘmy jφ ned∞lajφ ani uvozovky nebo Φφslovßnφ element∙.</p>
  123.  
  124. <h3>Vizußlnφ model</h3>
  125. <p>Spoustu mo₧nostφ p°ineslo CSS2 do vizußlnφho modelu. P°edevÜφm p°ibyly novΘ hodnoty pro st∞₧ejnφ vlastnost <samp>display</samp>. O t∞chto zm∞nßch se doΦtete ve Φlßnku <a href='http://interval.cz/clanek.asp?article=1845' title='Dudek, Jan: CSS2 û vizußlnφ formßtovacφ model'>CSS2 û vizußlnφ formßtovacφ model</a>. Nynφ ji₧ k podpo°e t∞chto hodnot v Ope°e: </p>
  126.  
  127. <div class='table'>
  128. <table cellspacing='0'>
  129. <tr><th>hodnota vlastnosti display</th><th>podpora v Ope°e 7.22</th></tr>
  130. <tr><td>run-in</td><td>x</td></tr>
  131. <tr><td>compact</td><td>x</td></tr>
  132. <tr><td>marker</td><td>-</td></tr>
  133. <tr><td>inline-table</td><td>x</td></tr>
  134. </table>
  135. </div>
  136.  
  137. <p>DalÜφ novinkou je nastavenφ minimßlnφ, respektive maximßlnφ velikosti elementu: </p>
  138.  
  139. <div class='table'>
  140. <table cellspacing='0'>
  141. <tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  142. <tr><td>min-width</td><td>minimßlnφ Üφ°ka</td><td>x</td></tr>
  143. <tr><td>min-height</td><td>minimßlnφ v²Üka</td><td>x</td></tr>
  144. <tr><td>max-width</td><td>maximßlnφ Üφ°ka</td><td>x</td></tr>
  145. <tr><td>max-height</td><td>maximßlnφ v²Üka</td><td>x</td></tr>
  146. </table>
  147. </div>
  148.  
  149. <p>A koneΦn∞ takΘ norma CSS2 definovala novΘ vlastnosti pou₧itelnΘ pro dynamickΘ efekty vyvolanΘ n∞kter²m skriptovacφm jazykem: </p>
  150.  
  151. <div class='table'>
  152. <table cellspacing='0'>
  153.  
  154. <tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  155. <tr><td>overflow</td><td>chovßnφ elementu p°i p°eteΦenφ</td><td>x</td></tr>
  156. <tr><td>clip</td><td>nastavenφ zobrazovanΘ oblasti elementu</td><td>x</td></tr>
  157. <tr><td>visibility</td><td>viditelnost obsahu elementu</td><td>x</td></tr>
  158. </table>
  159. </div>
  160.  
  161. <p>Narozdφl od p°edeÜlΘ ÜestkovΘ verze se Opera 7.22 v implementaci t∞chto vlastnostφ znaΦn∞ zlepÜila. Nejd∙le₧it∞jÜφ zm∞nou bezesporu je, ₧e ji₧ dokß₧e element∙m s p°eteΦen²m obsahem sprßvn∞ p°i°adit scrollbary, pokud je o to po₧ßdßna hodnotami <samp>scroll, auto</samp> vlastnosti <samp>overflow</samp>.</p>
  162.  
  163. <h3>CSS2 a tabulky</h3>
  164. <p>Velk² pokrok v CSS2 takΘ zaznamenala <a href='http://interval.cz/clanek.asp?article=1874' title='Dudek, Jan: CSS2 û formßtovacφ mo₧nosti tabulek'>podpora tabulek</a>. V minulΘ kapitole jsme si ukßzali, ₧e Opera 7.22 podporuje hodnotu <samp>inline-table</samp> vlastnosti <samp>display</samp>, tedy vlo₧enφ tabulky jako °ßdkov² element. Zde je v²Φet dalÜφch vlastnostφ: </p>
  165.  
  166.  
  167. <div class='table'>
  168. <table cellspacing='0'>
  169. <tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  170. <tr><td>caption-side</td><td>umφst∞nφ popisu tabulky</td><td>ΦßsteΦn∞</td></tr>
  171. <tr><td>text-align: "znak"</td><td>zarovnßnφ obsahu bun∞k na urΦit² znak</td><td>-</td></tr>
  172. <tr><td>visibility: collapse</td><td>schovßnφ Φßsti tabulky pou₧itelnΘ p°i dynamick²ch efektech</td><td>-</td></tr>
  173. <tr><td>table-layout</td><td>nastavenφ algoritmu vykreslovßnφ tabulky</td><td>x</td></tr>
  174. <tr><td>border-collapse</td><td>nastavenφ druhu okraje tabulky</td><td>x</td></tr>
  175. <tr><td>border-spacing</td><td>mezera mezi bu≥kami</td><td>x</td></tr>
  176. <tr><td>empty-cells</td><td>chovßnφ okraje u bun∞k bez obsahu</td><td>x</td></tr>
  177. <tr><td>border: hidden;</td><td>zruÜenφ okraje u zhroucenΘho modelu</td><td>x</td></tr>
  178. </table>
  179. </div>
  180.  
  181. <p>I v p°φpad∞ tabulek zvlßdß Opera vÜechny d∙le₧itΘ vlastnosti, neumφ pouze zarovnßvat obsahy bun∞k pod sebe na urΦit² znak a nepodporuje dynamickΘ schovßvßnφ °ßdk∙. Polohu popisu tabulky zvlßdß nap∙l, umφ jej umφstit nahoru a dol∙, ale u₧ ne vlevo nebo vpravo od tabulky.</p>
  182.  
  183. <h3>Polohovßnφ</h3>
  184. <p>Poslednφ skupina vlastnostφ umo₧≥uje umφs¥ovat elementy mimo normßlnφ tok dokumentu. Takto se dajφ vytvß°et tzv. CSS layouty. O polohovßnφ se doΦtete vφce ve Φlßnku <a href='http://interval.cz/clanek.asp?article=1883' title='Dudek, Jan: CSS2 û pozicovßnφ element∙'>CSS2 û pozicovßnφ element∙</a>. Nßsleduje poslednφ tabulka tohoto Φlßnku reprezentujφcφ podporu polohovacφch vlastnostφ v Ope°e:</p>
  185.  
  186. <div class='table'>
  187. <table cellspacing='0'>
  188. <tr><th>vlastnost</th><th>v²znam</th><th>podpora v Ope°e 7.22</th></tr>
  189. <tr><td>position: relative</td><td>relativnφ umφst∞nφ v∙Φi p∙vodnφ poloze</td><td>x</td></tr>
  190. <tr><td>position: absolute</td><td>absolutnφ urΦenφ pozice</td><td>x</td></tr>
  191. <tr><td>position: fixed</td><td>element z∙stßvß stßle na zadanΘ pozici</td><td>x</td></tr>
  192. <tr><td>float</td><td>nastavenφ elementu jako plovoucφho</td><td>x</td></tr>
  193. <tr><td>clear</td><td>zakßzßnφ obtΘkßnφ elementu</td><td>x</td></tr>
  194. <tr><td>z-index</td><td>z sou°adnice elementu</td><td>x</td></tr>
  195. </table>
  196. </div>
  197.  
  198. <p>V Ope°e se tedy nebojte zobrazovat jakΘkoliv strßnky s CSS layoutem, m∞la by je zvlßdnout bez problΘm∙.</p>
  199.  
  200. <h3>Opera a XML</h3>
  201. <p>Opera dßle umo₧≥uje zobrazovat obecnΘ XML soubory. Pokud jim nep°i°adφte ₧ßdn² styl, budou vÜechny elementy vypsßny za sebou jako °ßdkovΘ elementy, p°esn∞ podle normy. V opaΦnΘm p°φpad∞ bude dokument sprßvn∞ naformßtovßn podle danΘho stylu.</p>
  202.  
  203. <h3>Nastavenφ posuvnφk∙</h3>
  204. <p>Internet Explorer p°iÜel s mo₧nostφ nastavit pomocφ svΘho rozÜφ°enφ CSS barvu posuvnφk∙ (scrollbar∙). SedmiΦkovß Opera tuto mo₧nost podporuje takΘ. Ale proto₧e jde o nestandardnφ rozÜφ°enφ, musφte to nejd°φve povolit. Provedete to p°es <kbd class='mouse'>File|Preferences|Page style</kbd> zaÜkrtnutφm mo₧nosti <strong>Enable styling of scrollbars</strong>.</p>
  205.  
  206. <h3>ProblΘmy se zalomenφm</h3>
  207. <p>Zatφm jsem Operu po°ßd jenom chvßlil, ale samoz°ejm∞ nenφ bez chyby. Tou nejzßva₧n∞jÜφ je obΦasnΘ nesprßvnΘ interpretovßnφ elementu <samp>br</samp>, za kterΘ pravd∞podobn∞ m∙₧e n∞jakß chyba ve zpracovßnφ kaskßdov²ch styl∙. Zkrßtka jde o to, ₧e sedmiΦkovß Opera v n∞kter²ch sv²ch verzφch zdvojφ zalomenφ vyvolanΘ pomocφ <samp><br /></samp> a v jin²ch ho ·pln∞ ignoruje, resp. vlo₧φ mφsto n∞j nesmyslnΘ znaky. Je zvlßÜtnφ, ₧e se tak ned∞je ve vÜech elementech, ale pouze v n∞kter²ch. ╪eÜenφ tohoto problΘmu sice existuje, ale nenφ ·pln∞ dokonalΘ. V adresß°i <em>Styles</em> domovskΘho adresß°e Opery vlo₧te do souboru <em>user.css</em> nßsledujφcφ dva °ßdky: </p>
  208.  
  209. <div class='sample'>
  210. br:before { content: inherit !important; }
  211. <br />br { display: block !important; height:0 !important; }
  212. </div>
  213.  
  214. <p>Nßsledn∞ se podφvejte do <kbd class='mouse'>File|Preferences|Page style</kbd> a v poli <strong>My style sheet</strong> zadejte cestu se jmΘnem editovanΘho souboru (pokud tam jeÜt∞ nenφ). Pak klikn∞te na tlaΦφtko <strong>Configure modes...</strong> a v nßsledujφcφm formulß°i zaÜkrtn∞te <kbd class='mouse'>My style sheet</kbd> pro oba m≤dy.</p>
  215. <p>Jak u₧ jsem p°edesφlal, ani toto °eÜenφ nenφ bez chyby. Aplikovßnφ uvedenΘho stylu mß toti₧ za nßsledek, ₧e vÜechna vφcenßsobnß zalomenφ se smrsknou do jednoho.</p>
  216.  
  217. <h3>Zßv∞r</h3>
  218. <p>I p°es problΘmy se zalamovßnφm je sedmiΦkovß Opera modernφ a v²born∞ pou₧iteln² prohlφ₧eΦ, kter² podporuje drtivou v∞tÜinu mo₧nostφ CSS2. Uvidφme, jak (a zdali) na to Microsoft zareaguje a spoleΦn∞ s nov²m operaΦnφm systΘmem koneΦn∞ p°ijde se skuteΦn∞ pou₧iteln²m prohlφ₧eΦem.</p>
  219.  
  220. <div class='refer'>
  221. <h3>P°edchozφ Φlßnky</h3>
  222. <ul>
  223. <li><a href='http://interval.cz/clanek.asp?article=1900'>CSS2 û mluvenΘ styly</a></li>
  224. <li><a href='http://interval.cz/clanek.asp?article=1883'>CSS2 û pozicovßnφ element∙</a></li>
  225. <li><a href='http://interval.cz/clanek.asp?article=1874'>CSS2 û formßtovacφ mo₧nosti tabulek</a></li>
  226. <li><a href='http://interval.cz/clanek.asp?article=1845'>CSS2 û vizußlnφ formßtovacφ model</a></li>
  227. <li><a href='http://interval.cz/clanek.asp?article=1828'>CSS2 û automaticky generovan² obsah</a></li>
  228. <li><a href='http://interval.cz/clanek.asp?article=1811'>CSS2 û pravidlo strßnky</a></li>
  229. <li><a href='http://interval.cz/clanek.asp?article=1805'>CSS2 û at rules aneb pravidla zavinßΦe</a></li>
  230. <li><a href='http://interval.cz/clanek.asp?article=1778'>CSS2 û selektory, pseudot°φdy a pseudoelementy</a></li>
  231. <li><a href='http://interval.cz/clanek.asp?article=1745'>CSS2 û KaskßdovΘ styly podruhΘ</a></li>
  232. </ul>
  233. </div>
  234.  
  235.  
  236.  
  237. <div id='article-author'>
  238. <a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/autor.asp?author=125'>Dudek, Jan</a> (26.11. 2003)
  239. <div id='article-about-author'>
  240.  
  241. </div>
  242. </div>
  243.  
  244.  
  245.  
  246. </div></div>
  247. <div id='page-right'><h2 class='textversion'>Prav² sloupek</h2>
  248. <div id='search'><h3 class='textversion'>Vyhledßvßnφ</h3><form method='get' action='http://interval.cz/search.asp'><div><input type='text' name='hledej' class='text' /><input type='submit' class='submit' value='Najdi!' /></div></form><div><a href='http://interval.cz/search_ex.asp'>RozÜφ°enΘ vyhledßvßnφ</a></div></div>
  249.  
  250.  
  251.  
  252. <div class='page-right-box book'>
  253.     <h3>Kni₧nφ novinka</h3>
  254.     <div class='page-right-box-in'>
  255.         <div class='book-top'>
  256.             <h4><a href='http://interval.cz/redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=235'>PostgreSQL: Praktick² pr∙vodce</a></h4>
  257.         </div>
  258.     </div>
  259.     <div class='image'>
  260.         <a href='http://interval.cz/redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=235'><img src='podklady/knihy/image.jpg' alt='obßlka' title='obßlka' /></a>
  261.     </div>
  262.     <div class='book-bottom'>Cena: <span class='book-price-old'>447,00 KΦ</span> <span class='book-price-new'>402,30 KΦ</span></div>
  263. </div>
  264.  
  265.  
  266.  
  267. <div class='page-right-box reading'>
  268.     <h3>NejΦten∞jÜφ</h3>
  269.     <div class='page-right-box-in'>
  270.         <ul>
  271. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2856'>ZnakovΘ sady v praxi</a></li>
  272. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2849'>Vytvß°enφ dokument∙ PDF v PHP</a></li>
  273. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2852'>Interval v zajetφ Φφsel</a></li>
  274. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2850'>CSS2 - podpora kaskßdov²ch styl∙ v sedmiΦkovΘ °ad∞ Opery</a></li>
  275. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2844'>P.E.T. - jednoduch² Üablonovacφ systΘm v PHP</a></li>
  276.         </ul>
  277.     </div>
  278. </div>
  279.  
  280.  
  281.  
  282. <div class='page-right-box cauldron'>
  283.     <h3>Diskuznφ kotel</h3>
  284.     <div class='page-right-box-in'>
  285.         <ul>
  286. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2313'>Studenß vßlka prohlφ₧eΦ∙</a><div>222 komentß°∙ </div></li>
  287. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=1573'>Kam jφt studovat?</a><div>108 komentß°∙ </div></li>
  288. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2797'>VyhlßÜenφ sout∞₧e Interzen 2003</a><div>95 komentß°∙ </div></li>
  289. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2827'>Dreamweaver MX 2004</a><div>48 komentß°∙ </div></li>
  290. <li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2816'>beeasy.cz</a><div>47 komentß°∙ </div></li>
  291.         </ul>
  292.     </div>
  293. </div>
  294.  
  295.  
  296.  
  297. <div class='page-right-box emailserv'><h3>Email servis</h3><div class='page-right-box-in'><form action='prihlaseni.asp' method='post'><div class='shell'><input class='text' type='text' name='adresa' /></div><div class='shell'><input class='radio' type='radio' value='1' name='co' checked='checked' />T²dennφ p°ehled Φlßnk∙</div><div class='shell'><input class='radio' type='radio' value='2' name='co' />HELP konference</div><div class='shell'><input class='submit' type='submit' value='P°ihlßsit' /></div></form></div></div>
  298. </div>
  299. <div class='page-maker'> </div><div class='page-maker-white'> </div></div>
  300. <div id='page-foot'><div id='page-foot-menu'><a href='http://interval.cz/reklama.asp'>Inzerce na Interval.cz</a> | <a href='http://interval.cz/redakce.asp'>Redakce Interval.cz</a> | <a href='http://interval.cz/autori.asp'>Hledßme novΘ autory</a></div><div id='issn'>ISSN 1212-8651</div><div id='page-foot-zoner'>© Zoner software, s.r.o., vÜechna prßva vyhrazena, tento server dodr₧uje <a href='http://interval.cz/privacy.asp'>prßvnφ p°edpisy</a>o ochran∞ osobnφch ·daj∙.</div></div>
  301. </body>
  302. </html>