Azt hiszem jogosan várjuk el egy szoftver felhasználói felületétől, hogy ha egy gombot nem lehet megnyomni, akkor ez messziről ordítson róla. Sajnos ez a Firefoxban megjelenített weboldalakon nem mindig van így.

Legyen két teljesen egyszerű gombunk, ám az egyik legyen disabled:

  <asp:Button runat="server" Text="Meg lehet nyomni" />
  <asp:Button runat="server" Text="Nem lehet megnyomni" Enabled="false" />

Ezek teljesen jól jelennek meg IE8-ban és FF 3.5-ben, a disabled gomb szép szürke:

A bajok akkor kezdődnek, ha elkezdünk virgonckodni és ráakasztunk a gombra valamilyen dizájnt, például ezt a CSS osztályt:

  .button
  {
    background-color: Orange;
    color: #940000; 
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 0.8em;
    border: solid 1px #afafaf;
    cursor: pointer;
    padding: 3px 5px;
    border: solid 1px #d5d5d5;
  }

Innentől kezdve a nyomorult Firefox nem törődik azzal, hogy a gomb enabled vagy disabled, mindegyik úgy fog kinézni, ahogy azt a CSS osztályban megadtuk: Az egyik megoldás nyilván az, hogy miközben szerver oldali kódból vagy JavaScriptből állítgatjuk az enabled állapotot, manuálisan gondoskodunk a gomb megjelenéséről is. Ennél egy nagyságrenddel jobb megoldás egy másik CSS osztály felvétele, ami csak akkor alkalmazódik, ha a gombot letiltottuk. Ehhez tudnunk kell, hogy a szerver oldali Enabled=”false” kliens oldalon disabled=”disabled” lesz:

  .button[disabled="disabled"] /* Firefox workaround */
  {
    background-color: LightGray;
    color: Gray;
  }    

Íme az eredmény:

Kiváló példa arra, hogy egy dizájner mivel tud hónapokig “szöszmötölni” egy projekten, illetve, hogy mennyire nem attól lesz valaki jó dizájner, hogy van grafikai érzéke és ismeri a CSS-t, hanem hogy mennyi tapasztalata van és mennyire figyel a részletekre.

Ráadás (2009.08.25.)

Úgy látszik ez sem tökéletes, ugyanis ha JavaScriptből állítom a disabled tulajdonságot, akkor FF-ban “”, “true” vagy “false” értéket vesz fel, amire persze a fenti disabled=”disabled” nem illeszkedik. Gincsai Gábor barátom szerint a .button:disabled { color: Gray; } osztály felvételével ez is kezelhető.