Linkitysmalli 1 - Linking model 1

Tämä sivu on malli, minkäkaltaisen systeemin haluaisin luoda. Alla on kuvakaappaus MS IE 6.0 Widowsista (Mozilla 0.9 näyttää lähes samalta), kun toista alivalikkonuolta on klikattu (valikoiden esitysasu on nykyisin hieman erilainen).

A Model, which kind of system I would like to use. Below is a screen capture from MS IE 6.0 for Windows (Mozilla 0.9 renders almost at the same way) after the second sub-menu arrow has been clicked (today the presentation of the sub-menus are a little bit different).

Selainkohtaisia vihjeitä - Browser-specific advice:

• Alivalikot eivät toimi Opera 7.x vanhemissa Opera selaimissa lainkaan.

  Sub-menus don't work at all in Opera browsers, which are older than Opera 7.x.

  Syyt - reasons:

  • Opera ei salli dynaamisten näennäisluokkien :hover, :active ja :focus avulla muutoksia, jotka vaikuttavat elementtien mittaisuhteisiin tai näyttötyyppiin (display-type).

    Opera doesn't allow by using dynamic pseudo-classes :hover, :active and :focus changes, which affect to the dimensions or display-types of elements.

  • Koska Opera toteuttaa :active CSS2:n mukaisesti, se tarvitsisi myös :focus tuen, jota siinä ei ole.

    Because Opera implements :active according to CSS2, it would need to support also :focus, which is not supported.

  • Säännöt, joiden muoto on a:näennäisluokka elementti {...}, eivät toimi Operassa.

    Rules, which have the format a:pseudo-class element {...}, don't work in Opera.

• Opera 7.x tukee :focus mutta vain lomakekontrollielementeille, miksi nämä valikoihin ei pääse kunnolla käsiksi Opera 7.x:ssä. Kun ensin menee valikon avausnuolen viereen ja kasoisklikkaa nuolta, valikko saattaa jäädä auki. Edellinen valikko saattaa jäädä päälle. Alivalikoiden sulkeutuminen on epämääräistä. Alivalikot ovat käytännössä käyttökelvottomia.

  Opera 7.x support :focus but only with form control elements, why these menus are not properly accessible in Opera 7.x. When the visitor goes on some side of the opening arrow of the sub-menus and then double click the arrow, the menu might remain open. Previous menu might remain above the opened menu. Sub-menus close inconsitent. Sub-menus are in practise useless.

• MS IE 5.5+ Windows toteuttaa dynaamiset alivalikot, jos määritellään :hover ja :active. Jälkimmäinen toimii selaimessa CSS1:n mukaisesti (CSS2:ssa :active ja :focus ovat eri tiloja, jolloin CSS2:n mukaan toimivalle selaimelle olisi välttämätöntä määritellä :focus).

  MS IE 5.5 for Windows implements dynamic sub-menus, if the author defines states :hover and :active. The latter works according to CSS1 (in CSS2 :active and :focus are different states, when acccording to CSS2 working browsers would be necesssary to define also :focus).

• Eräiden testien perusteella alivalikot eivät toimi lainkaan tai toimivat erittäin huonosti ainakin MS IE 4.0 Windows, MS IE 5.0 Windows ja MS IE 5.0 Mac-selaimissa. Alivalikoille tehty koodi on medialohkon (@media ... {...}) sisällä, jonka MS IE 5.0 Mac ohittaa. Lohkoa ennen on piilostuskomennot (piilotetut elementit määritellään lohkossa uudestaan näkyviksi).

  According to some tests sub-menus don't work at all or work very bad in MS IE 4.0 for Windows, MS IE 5.0 for Windows and in MS IE 5.0 for Mac. The encoding for sub-menus is inside a media block (@media ... {...}), which MS IE 5.0 for Mac skips. Before the block is commands to hide some elements (hided elements have been defined visible again in the media-block).

• Systeemi ei toimi Netscape 6.0:ssa - lopputulos on kamala! Koska uudet Netscape/Mozilla selaimet toteuttavat :active CSS2:n mukaisesti, nille tarvitsee määritellä myös myös :focus, jotta alivalikoissa olevat linkit voisi aktivoida.

  The system doesn't work in Netscape 6.0 - the result is awful! Because new Netscape/Mozilla browsers implement :active according to CSS2, in is necessary to define also :focus in order to activate links, which are in the sub-menus.

  Selaimissa on seuraavia pieniä bugeja - browsers have following small bugs:

  • :Focus-toteutuksessa on pieni bugi. Sen aktivoiva linkki ei toimi, ellei linkillä ole marginaalia tai se ei ole määritelty lohkoksi. Tästä syystä mallieni alivalikot jäävät paikoilleen jos klikkaa nuolen vasemmalle tai oikealle puolelle.

    These browsers have a small bug in the :focus implementation. The link, which activate the status, doesn't work if it doesn't have margins or it is not defined as a block. That's why in my models the sub-menus stay in their places only when clicking to the left or right side of the arrows.

  • Kaikille alivalikoihin liittyville elementeille täytyy määritellä näyttötyyppi (käytännössä display:inline tai display:block), vaikka se ei CSS2-spesifikaation pohjalta olisi kaikissa tilanteissa välttämätöntä.

    For all sub-menu related elements must define the display-type (in practise display:inline or display:block) even if it would not in the base of CSS2-specification in all situations necessary.