Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > R Millaisia CSS-editoreita on olemassa

R Millaisia CSS-editoreita on olemassa

Käsiteltävät editorit/sovellukset

• PageBuilder
• HTML-Kit
• Amaya
• Top Style
• StyleMaster
• Netscape 6.x
• Macromedia Dreamweaver 4.0
• DHTML Menu Builder

PageBuilder

PageBuilder on koodieditori, jossa on hyvä CSS1-tason velho (wizard). Ainoa CSS2-tason lisäys on pseudoluokka hover (sekään ei johdu spesifikaatiosta vaan MS IE selaimesta, joka otti sen käyttöön sovelluskohtaisena laajennuksena).

Ohjelma käyttää sisäisenä selaimena MS IE:tä (versio 3.02 tai uudempi). Se on sangen halpa Shareware-ohjelma.

HTML-Kit

Ilmaisessa HTML-kit koodieditorissa on kaikki CSS2-tason ominaisuudet. Ongelmana on se, että CSS-valitsinlistassa on kaikki HTML 4.0 elementit eli sellaisetkin, joihin ei voi sovittaa CSS-sääntöjä. Toisaalta lista ei sisällä pseudo-luokkia ja -elementtejä kuten PageBuilderin lista. Syynä on se, että CSS:lle ei ole tehty omaa listaa. Ohjelmaan on kuitenkin saatavissa CSS:ää ajatellen plug-ins -tiedostoja.

HTML-kit sisältää täydellisen HTML-tason elementti- ja attribuuttiluettelon. Se ei hae tiedostonimiä ilman plug-ins -tiedostoja. PageBuilderin tavoin sisäisenä selaimena toimii MS IE.

Ohjelma muuntaa HTML-dokumentit XHTML tai XML-dokumenteiksi sekä korjaa elementtien virheet plug-ins -ohjelmalla, joka tulee asennuspaketin mukana. Siihen saa ohjelman suunnittelijan tai muiden tekemiä muita plug-ins -ohjelmia kuten:

• CSS1-editori (CSS1-tason ominaisuudet ja puuttuu näennäisluokkien- ja elementtien valinta, mutta niitä pitäisi voida lisätä editoimalla CSS_ref.txt -tiedostoa - ohjelma ei reagoinut tekemiini muutoksiin)
• Kuvien haku
• Tiedostojen haku (puutteelliset toiminnot)
• Perl code menu
• PHP3 koodivalikko
• CSS-validaattori (W3C tekemä, kirjoitettu Javalla)
• Tekemäni CSS-valikko. Saat sen Zip-hakemistosta.
• Mukana on myös eräs XSL(T)-valikko, joka perustuu vanhentuneeseen W3C XSLT spesifikaatioehdotukseen vuodelta 1998 (virallinen W3C:n suositus on marraskuulta 1999). Se on tarkoitettu vain MS IE 5.0 varten, sillä siinä on useita sovelluskohtaisia ominaisuuksia, jotka eivät toimi muissa kuin em. selaimessa. En suosittele sen lataamista. Tein valikon, joka perustuu nykyisiin suosituksiin. Se on saatavissa zip-tiedostona. Jotta voit muokata sitä helposti, lataa HTMK-Kit -ohjelman sivuilta myös Plugins Generator.

Suosittelen, että tarkastat sivusi silloin tällöin W3C HTML-validaattorilla. HTML-kit -ohjelmassa on HTML-Tidy plug-ins sovellus. Sen avulla saa korjattua kaikki syntaksivirheet. Sen vanhemmat versiot eivät ole kuitenkaan varsinaisia validaattoreita, sillä ne sallivat joidenkin sovelluskohtaisten attribuuttien käytön. Uusin versio ei enää epästandardeja attribuutteja tai elementtejä hyväksy, joten se on lähes online-validaattoripalveluiden tasoinen (epästandardeista piirteistä varoittamisen saa kuitenkin pois päältä). HTML-Kit ohjelman avulla voi testata sivun myös jollakin online-validaattoripalvelulla.

Amaya

W3C:n tekemä Amaya näyttää sivut WYSIWYG muodossa ja toimii itse selaimena. Myös siinä on CSS2-tason tuki, mutta se ei pysty näyttämään kaikkia ominaisuuksia oikein. Tosin se luo tyyliattribuutteja, tyylisääntöjä ja käsittelee tyylisivuja.

Ohjelma voi olla hyödyllinen uusien spesifikaatioiden testauksessa, sillä siihen laitetaan kokeellisia uusien spesifikaatioiden toteutuksia (MathML, SVG ja XLink).

Ohjelman haittapuoliin kuuluu se, että se kaatuu helposti. Ohjelma ei myöskään koodaa skandinaavisia erikoiskirjaimia (ä jne.) oikein.

Top Style

Parhaana pidetty editori on käyttöliittymältään MS Office 97 -tyylinen Bradsoftin valmistama TopStyle. Ohjelma tukee CSS2 spesifikaatiota. Siinä annetaan myös ohjeita, mitkä ominaisuudet toimivat eri selaimissa. Jotkut CSS-ominaisuudet puuttuvat versiosta 1.50, mutta ne on lisätty versioon 1.51. Version 1.50 validaattori ja "siivooja" (sweeper) tekee pahojakin virheitä. Olen tehnyt useita virheraportteja ja ohjelman tekijä lupasi korjata virheet ainakin versioon 2.0, mutta en ole testannut toimivuutta, sillä olen asentanut itselleni vain ilmaisen kevytversion (Lite), josta puuttuu mm. validaattori ja siivooja.

StyleMaster

Testaamani 1.5 -versio sisältää melkein kaikki CSS2 visuaaliseen näyttämiseen liittyvät säännöt, ominaisuudet ja niiden arvot. Mukana sangen hyviä opastuksia. Ei sisällä kuuloon perustuvia ominaisuuksia. Se ei sisällä myöskään validaattoria.

Kevytversio merkitsee kuitenkin virheelliset ominaisuudet punaisella (tosin jos tyylisivussa on @media, se merkitsee ensimmäisen säännön virheellisesti punaisella). Huomaa, että se merkitsee tärkeyssäännön lihavoidulla punaisella.

Netscape 6.x

Netscape 6.x on selain, joka käy melkein vertailuselaimena sille, miten selainten tulisi näyttää CSS (siinäkin on tosin omat virheensä). Se toteuttaa lähes kaikki visuaaliset CSS-ominaisuudet.

Pakettiin kuuluu hyvin CSS:ää tukeva WYSIWYG-editori (testasin Mozilla 0.7:n mukana tullutta editoria) - ehdottomasti markkinoiden paras sen suhteen, miten lähellä editoitava tila on lopullista HTML 4.01 ja CSS2 standardien mukaista esitystapaa. Mutta siinä ei ole helppoa tapaa lisätä CSS:ää. Jotta ohjelmaa voi käyttää täytyy avata ensin selain. Vaikuttaa siltä, että se käyttää selaimen esityskonetta sivun esittämiseen.

Se laittaa mukaan yleisentiteetit toisin kuin MS IE -selaimen mukana tuleva MS FrontPage Express. Ohjelma laittaa ankkureihin vain name-attribuutin, vaikka XHTML:ssä pitäisi käyttää myös id-attribuuttia. Ohjelma lisää koodin melko lailla valkotilaa (white space), mistä kaikki eivät pidä. Koodin kääntäminen XHTML-muotoon olisi lisäksi toivottava piirre.

Macromedia Dreamweaver 4.0

Dreamweaver on CSS:n suhteen WYSIWYG-editoriksi vaatimaton - kaukana Mozilla 0.7:n tasosta. Dreamweaverista puuttuu CSS-piirteitä (esim. position:fixed ja :focus).

Kerrosten (layers) asettelu on ongelmallinen. Ohjelma käyttää oletusarvona niiden luomisessa elementtiä DIV, jolle se antaa ominaisuuden position:absolute. Dreamweaver asettaa kerrokset niin kauan oikein, kun ne ovat elementin BODY lapsielementtejä (tai niiden ympärillä on elementti, jolla ei ole marginaalia tai täytettä suhteessa BODY-elementtiin). Mikäli kerroksen luova elementti on sellaisen elementin (esim. taulukkosolun) sisällä, joka luo marginaaleja suhteessa BODY-elementtiin, systeemi menee pieleen, koska kaikki selaimet toteuttavat kerrokset tässä tilanteessa väärin. CSS2-spesifikaation perusteella asemointi tulisi laskea lähimmästä lohkotason säilytinelementistä (container element) käsin, mutta mielestäni Dreamweaver ei niin tee eli sekin toimii väärin.

Dreamweaverin pitäisi aina muuttaa elementin DIV paikkaa, jotta kerrokset toimisivat aina oikein. Ohjelman käyttäjän täytyy osata tämä tehdä ja hänen tuleee tietää, miten selaimet todella toimivat ja pitää tietää, miten koodia editoi kooditasolla, jotta se todella toimisi (ks. myös eräs CSS-nootti.

CSS-editori on alkeellinen (TopStyle on paljon parempi siihen tarkoitukseen).

HTML:n suhteen ohjelma tekee sivun ominaisuuksien suhteen omia attribuutteja, jotka eivät toimi missään selaimessa (esim. <BODY tracingsrc="joku.gif" tracingopacity="23">). En ymmärrä niitä (ehkä jokin väliaikaiskäyttö).

Ohjelma ei myöskään huomauta, mitkä ovat spesifikaatioiden mukaisia attribuutteja ja mitkä selainkohtaisia. Jotta koodi toimisi, täytyy tuntea spesifikaatiot ja selaintoteutukset (HTML-Kit tiedottaa, kuuluvatko elementit ja attribuutit tiettyihin spesifikaatioihin vai ovatko ne selainkohtaisia). Selaimen lomake-elementtivalikko on puutteellinen (Netscape 6.0 tukee kaikkia muita lomake-elementtejä paitsi poistuvaa ISINDEX elementtiä).

Dreamweaver on näppärä joissakin kohdin (upotetut objektit, kehyssetit, rolloverit jne. pikatoiminnot), mutta ei takaa haluttua lopputulosta millään selaimella. Sivustokartta (site map) puuttuu ilmaiseditoreista ja jotkin pikatoiminnot, mutta muuten ilmaiseditoreilla saa saman aikaiseksi.

Ikävin piirre on se, että vie paljon käyttöresursseja. Ohjelma toimii monessa koneessa tahmeasti.

DHTML Menu Builder

Monet sovellukset luovat selainkohtaista DHTML:ää, jonka toimivuus on rajallista. Dynaamiset valikot ovat eräitä parhaimpia DHTML:n avulla saatavia ratkaisuja sovelluksia. Niiden luomisesta selviää helpoiten ostamalla DHTML Menu Builder ohjelman, jolla voi luoda DHTML/DOM valikoita kaikille selaimille, jotka niitä osaavat käsitellä (esim. Netscape 4.x, Netscape 66.x, MS IE 4.0+ Windows ja Opera 5.x). Se luo automaattisesti eri selainten tarvitsemat HTML-rakenteet ja CSS:n. Ohjelman vanhemmat versiot luovat epäkelpoa CSS:ää (uudemmat standardien mukaista). Jos CSS ei ole kelvollista, valikot toimivat joissakin selaimissa vain sellaisilla HTML dokumenttityypeillä, joissa selain ei toimi ns. standard(-compliant) -moodissa.