Gombok kiszürkítése Firefoxban

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:

Enabled és disabled gombok Firefoxban stílus nélkülA 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: Enabled és disabled gombok Firefoxban egyedi stílussal, azonosanAz 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:

Enabled és disabled gombok Firefoxban egyedi stílussal különbözően

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ő.

Technorati-címkék: ,,,

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s