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: ,,,

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s