09.09.2010

Рамкі без рам

* Source text URL: http://fu2k.org/alex/css/frames/



Уводзіны

Слова перасцярогі

Гэты метад не працуе ў IE6 пры вызначаных акалічнасцях – калі ласка, глядзіце частку сумяшчальнасці для атрымання дадатковай інфармацыі.

Агляд

Гэты шэраг старонак дэманструе, як абнавіць усе дасканаласці структур з не прыкметнай структуры ў поле зроку. Крыніцай для вашага элементаў могуць быць як семантычна, так і педантычна лагічныя, якія вы жадаеце, і вы можаце выкарыстоўваць пікселі, EMS ці адсоткі, каб усталяваць іх. У сутнасці, гэты метад імітуе фіксаванае пазіцыянаванне, а таксама камбінацыю верхняга і ніжняга, левага і правага ўласцівасцяў у IE, які, як любы дурань ведае, пабіты пры звычайных умовах.

Так, так, я ведаю – Вы хочаце дабрацца да вашывых пяшчаных, фактычных структур без матэрыялу структур. Проста церпіце мяне ўсё ж. Гэтая старонка ўтрымоўвае тлумачэнне таго, як гэты метад развіваўся, палавіністым “А вось частка навукі”, а таксама разбіўка, якую браўзары бяспечна выкарыстоўваюць гэты метад.

Натхненне

Я ўпіраўся косткамі пальцаў у зямлю, каб зрабіць усе спевы, танцуючы дэманстрацыйны прыклад, які растлумачвае цуды здані Эрыка Беднарза ў працаўніку скрынкі, пачынаючы з пытання: "Як я магу прывесці да падобных структур у выніках CSS?" Часта задаюць пытанне на CSS-абмяркаўванні, калі я натыкнуўся на дэманстрацыйны прыклад 2002 Эдвардсона Тана (Калонкі галактык), які меў вялікае значэнне амаль такога ж эфекту, але з абсалютна змешчанымі аддзяленнямі, паколькі я прагледзеў кодэкс Эдвардсона, я ўспомніў інавацыйныя выразы макс. шырыні Свена Тофте ў IE, і раптам я ўбачыў святло. Гэтыя старонкі – вынік той шчаслівай адпаведнасці.

Рамкі

Ах, так. Вось і навуковая частка.

XML-пралог (гэта смешна гледзячы тэгі на самым верху – <?xml version=”1.0″ encoding=”iso-8859-1″?>) Неабходна для IE6 для карэктнага адлюстравання – гэта можа быць магчымым абыйсціся без яе, але я не магу важдацца, каб зразумець, што з [1]. Гэта азначае, што IE6 працуе ў рэжыме сумяшчальнасці. На яркім боку, хоць гэта азначае, што няма неабходнасці карміць розных значэнняў розных версіях IE. (Дзіўна, калі гэтыя ж метады ўжываюцца для здані ў вакне, спосаб, які мы павінны трымаць у стандартным рэжыме, і таму павінны пакінуць пралог выйсце).

Усе элементы, якія будуць выступаць у якасці кадраў (у гэтых прыкладах усе яны надзейныя DIV-ы), павінны быць абсалютным пазіцыянаваннем і іх перапаўненні маёмасці ўсталяваны ў аўта (калі вы не ведаеце, што ўтрыманне гэтага элемента не будзе перавышаць памер элемента).

Наступная рэч – усталяваны набор autoflow арганізма на ўтоеныя – зараз абсалютным пазіцыянаваннем элементаў будзе заставацца на месцы трывала, як быццам яны павінны былі быць выпраўлены. Пакуль усё добра і не вельмі моцна адрозніваецца ад дэма, згаданага ў натхненні рэкламнай аб’явы.

Хітрасць складаецца ў выкарыстанні верхняй і ніжняй, правай і левай уласцівасці ў спалучэнні – сучасныя браўзары проста могуць зрабіць правільны выбар і разабрацца ў вышыні аўтаматычна. Гэта сапраўды так проста.

Акрамя гэта не так. Гэта не працуе ў IE – калі ў верхняй ці левай наладжваюцца ўласцівасці, то знізу і справа, адпаведна, ўласцівасці ігнаруюцца.

Рэальны трук (у дадатак ўжо згадвалася упершыню) складаецца ў выкарыстанні дынамічных уласцівасцяў, ён жа выразы.

"Але вядома”,-гаворыце вы, "выказвання не сцвярджаюцца?" Вы маеце рацыю – але няма нічога, что спыніць нас, размяшчая адпаведных адборшчыкаў або стыляў дэкларацыі ў рамках умоўных каментарыяў IE. Такім чынам, гэта дакладна, што мы робім.

Давайце разгледзім просты прыклад. Калі ў нас ёсць div#foo і мы жадаем, каб ён быў 200 пікселяў, і быў размешчаны ў верхнім левым куце і пабег увесь левы бок на дно, тады наступная заява, што трэба для ‘новага часу’:

#foo

{

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 200px;

overflow: auto;

}

Зараз нам трэба дадаць наступную заяву, што толькі версіі PC у IE можна ўбачыць:

#foo

{

height: expression(document.body.clientHeight+ “px”);

}

document.body.clientHeight

гэта вышыня вакна праекцыі, так, што тое, якое робіцца, кажа IE ў становішча Div у самай верхняй частцы вакна праекцыі, і зрабіць яго высокім, як праекцыі.

Даволі проста, так? Але як наконт div#bar, якога мы жадаем, каб ахапіць 50 пікселяў зверху, 100 пікселяў з дна, а з 75 пікселяў злева для 150 пікселяў, маем на гэта права? Гэта наша кропка адліку:

#bar

{

position: absolute;

top: 50px;

bottom: 100px;

left: 75px;

right: 150px;

overflow: auto;

}

Ізноў мы павінны дадаць дадатковую дэкларацыю, што толькі версіі ПК IE маюць для прагляду:

#bar

{

height: expression(document.body.clientHeight – (50+ 100)+ "px");

width: expression(document.body.clientWidth – (75+ 150)+ "px");

}

Гэта значыць, вышыня, роўная вышыні ў краявідзе, мінус верхняе і ніжняе значэнні сумуюцца. Шырыня працы сапраўды гэтак жа, але з левага і правага значэння адымаецца з шырыні краявіднага вакна. (Вядома, можна напісаць 50+ 100 да 150 – Я толькі што зрабіў гэта такім чынам, каб зрабіць яго відавочным таго, што адбываецца)

IE5 Mac – цяжкае дзіця, аднак (і асабіста мой выбар) для ўшанавання новага Netscape 4, таму што гэта робіць правільную старую мешаніну перапаўнення, калі пэўная вышыня не была ўсталяваная. Цяжкае становішча адносна трывіяльна, хоць – робяць старонку традыцыйным бесперапынным scroller для Mac IE5, душачы overflow: hidden цела і не абсалютна змяшчаючы # content або # footer. Даследуйце кодэкс – Вы будзеце бачыць тое, што я маю на ўвазе.

На наступных старонках вы ўбачыце, як выкарыстоўваць EMS і адсоткі якасці адзінак выбару, калі Вы пажадаеце. Вы таксама ўбачыце, як мы можам затым ізноў выкладваць урокі тут, каб традыцыйная здань у поле ўзламала і вярнула юзабіліті кропкі, якія страціліся ў абсалютна пазіцыянуемым метаду, але не будзе вам вядома, ці губляюцца некаторыя іншыя ў гэтым працэсе.

“Кадры”, як правіла, прабелы паміж імі, каб паказаць больш ясна, як менавіта яны размешчаны, але фрагменты вышэй усёй угоды. Гэта сапраўды так проста.

Сумяшчальнасць

Працуе ў IE6 (але гл. ніжэй), IE5.5, IE5.01, Firefox 0.8, Mozilla 1.6, Safari 1.1, Opera 7.23, Opera 7.5.

З-за праблем з тым, як інтэрпрэтуе IE5 Mac вышыні, гэтыя дэма-старонкі, галоўным чынам, узламалі, каб Mac IE5 мог паводзіць сябе, як звычайная бесперапынная прагортка старонкі.

Оперы 5 і 6 з трэскам праваліліся (акрамя фіксаваных версій), але CSS можна лёгка скарэктаваць, каб яны паводзілі сябе гэтак жа, як Mac IE5. Ці не так, як ад пэўнага выпадку.

IE6 сумяшчальнасць пад XP2

Найбольш сур’ёзна гэты метад пайшоў ад горнага цела да нашмат менш вялікага статусу проста, верагодна, каб працаваць у IE6. Калі Microsoft выпусціў XP2, ён мадэрнізаваў IE6 так, каб javascript выказваўся ў межах CSS і не быў выкананы, калі, і толькі калі зона, якая старонка пражывае бяспеку within, ўстаноўлена ў ‘Высока’. У большасці версій IE6 ўрэгуляванне бяспекі для інтэрнэт-зоны ўстаноўлена ў ‘Сераду’ і такім чынам, гэты метад працягне працаваць на большасць карыстальнікаў з IE6. Аднак, калі Вы не можаце гарантаваць, што бяспека Вашых карыстальнікаў не будзе ‘Высокая’ (напрыклад, Ваш сайт размешчаны ў зоне, якой давяраюць), або калі Вы не будзеце пярэчыць супраць гэтага, то некаторыя карыстальнікі (па ўсёй верагоднасці, людзі ззаду карпаратыўнага брандмаўэра) не будуць звяртацца на Ваш сайт, які Вы прызначылі, я больш не магу рэкамендаваць выкарыстаць гэты метад. ‘Чысты’ javascript метад, такі як fixed.js Эндру Кловер, верагодна будзе лепшым рашэннем.

Сумяшчальнасць спосабаў стандартаў для IE 6

Фактычна я памятаў, што ведаў, як усталяваць яго для IE6 у спосабе стандартаў увесь час. Паколькі я ўсё яшчэ не быў занепакоены, каб уключыць тое веданне ў артыкул, я прымацоўваў яго тут як прыкладанне.

Трохі больш складаны выраз патрабуецца з тых часоў, калі IE6 знаходзіцца ў спосабе стандартаў, document.body.clientHeight вяртаецца 0, і Вы павінны выкарыстоўваць document.documentElement.clientHeight замест гэтага (сітуацыя – перамена ў спосабе дзівацтваў). Вядома, малодшыя версіі IE не вяртаюць каштоўнасць, таму што павінна выкарыстоўвацца ўмоўны выраз як:

(Document.documentElement.clientHeight? Document.documentElement.clientHeight: document.body.clientHeight)

Прыклад гэтага можа быць заўважаны на гэтай прыстасаванай версіі асноўнага размяшчэння.

Альтэрнатыўна Леиф Олсен напісаў, каб сказаць мне пра іншы спосаб прымусіць IE6 паказваць правільна ў спосабе стандартаў.

Проста дадайце "цела {вышыня: 100%;}" да Вашага css. Акрамя таго, Вы павінны накарміць новага прывіда ў скрынцы да IE6 выразамі.

Я не паспрабаваў гэта сам, бо я не знаходжу выраз вышэй занадта страшнага, але для тых, хто робіць, я думаў ён стаіць згадкі.

ok ok