Hilfe: Umpunktungen bei Buttons serverseitig abschalten

  • Moinsen !

    Bin neu hier, und bringe auch gleich ein Problem mit :D

    Das Problem:

    Mir ist augefallen, das der Firefox Browser (meiner z.B ist Ver. 2.0.0.6) alles was er findet beim draufklicken mit einer gepunkteten Linie umrandet.

    Seien es Links, Grafiken, Website-Tabs (Login Buttons etc) ..einfach alles *g.

    Nun habe ich ein CMS mit weissem Background auf meinem Web, und man kann sich bildlich vorstellen wie grausam das aussieht, wenn der gute Firefox da alles wo man gerad draufgeklickt hat schwarz umpunktet.

    Nun meine Frage an die Experten hier:

    Gibt es eine Art Code oder CSS womit ich die punktierte Darstellung auf allen Ebenen meiner Website abschalten kann ?

    Also mir gehts nur um die serverseitige Abschaltung, ein HowTo zur Clientseitigen Abschaltung hab ich bereits gefunden.

    Auch habe ich ein paar Ansätze zur serverseitigen Abschaltung gefunden, nur leider funktionieren die nicht.

    Z.B :

    Code
    |*:-moz-any-link:focus {
    	outline: none;
    }

    oder dies hier >> ...

    Code
    |:-moz-any-link:focus { outline: none; }
    
    
    input[type=”image”]:focus { outline: none; }
    
    
    button::-moz-focus-inner, input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner, input[type=”submit”]::-moz-focus-inner, input[type=”file”] > input[type=”button”]::-moz-focus-inner { border: none; }

    hab ich in das Website-CSS eingebaut, aber absolut kein Effekt, aka die Umpunktungen sind nach wie vor da.

    Wäre schön wenn jemand noch ne Idee hätte :)

    Greetz, anexX[/quote]

  • Einfach im Firefox den Wert

    browser.display.focus_ring_width

    mittels about:config auf 0 setzen.

    ...:AOD:...

    HP Chromebook 15a-nb0225ng, i3N-305, 8 GB LPDDR5-4800 MHz RAM (integriert), 256GB UFS, - chromeOS 135 (Stable Channel) - Linux Debian Bookworm: Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly

  • Zitat von AngelOfDarkness

    Einfach im Firefox den Wert

    browser.display.focus_ring_width

    mittels about:config auf 0 setzen.

    ...:AOD:...

    Ehm, ich möchte nichts im Firefox abschalten, ich möchte meine Webseite so einrichten das die Besucher meiner Webseite die Firefox verwenden die Umpunktung nicht sehen. ^^

  • Ich muss Dr. Evil da vollkommen zustimmen: Dies serverseitig auszuschalten ist ein erheblicher Eingriff, der dir als Webmaster nicht zusteht.

    Eine Anleitung, wie deine Nutzer es clientseitig abschalten können, ist in Ordnung, obwohl ihnen das erfahrungsgemäß reichlich egal sein dürfte (gehe nur von deinem eigenen Surfverhalten aus: Was hältst du selbst von Hinweisen der Art "Um unsere Seite richtig toll nutzen zu können, stellen Sie dies, dies und jenes in Ihrem Browser ein"? Wer ausschließlich mit der Maus arbeitet und diese Umrandung als extrem störend empfindet, der hat sie sicher bereits selbst deaktiviert.

    In ganz wenigen Fällen, z. B. wenn ein rechtsbündug ausgerichteter Link-DIV mit margin:0 umrandet wird und dadurch eine horizontale Scrollbar erzeugt, kann es sinnvoll sein, diese Markierung sofort wieder abzuschalten. Aber selbst da sollte man sie nicht komplett per CSS ausblenden

    Code
    div#link > a:focus {outline:none;}

    , sondern ausnahmsweise JavaScript bevorzugen. Mit dieser Lösung kann man nämlich den Link "antabben", aber die Umrandung verschwindet wieder, sobald man den Link aufgerufen hat:

    Code
    <a href="..." onClick="this.blur();">...</a>


    Aber wie gesagt, sowas sollte man nur in wenigen, begründeten Ausnahmefällen tun. Ansonsten sollte deine Webseite nicht versuchen, auf den Browser ihrer Nutzer Einfluss zu nehmen. Ein komplettes Ausbelnden über die focus-Pseudoklasse ist jedenfalls extrem schlechter Stil. Selbst Leute ohne Behinderung bevorzugen manchmal die Tastatur zum Surfen, abgesehen davon, dass die Focus-Umrandung auch andere Vorteile hat.

  • Hi,

    Dankeschön, das war genau das was ich gesucht habe, und voila, funktioniert sogar.

    Zum Thema "schlechter Stil" ... ich gehe generell davon aus das jemand der im Internet surft eine Maus neben sich hat. Sicherlich mag es einige Ausnahmefälle geben bei denen das nicht der Fall ist, aber man kann es halt nicht jedem Recht machen.

    Man muss sich das so vorstellen:

    Da entwirft jemand mit Photoshop passend aufeinander abgestimmte Farbverläufe in den Grafiken und Linkshadern, so das die Webseite absolut clean und goodlooking rüber kommt, und dann kommt Firefox und bratzt überall diese hässliche Umpunktung drüber. Das kann es natürlich nicht sein.

    Alternativ würde ich mich ja überreden lassen die Umpunktung wieder zu aktivieren, wenn es wenigstens eine Möglichkeit gäbe die Farbe der Umpunktung serverseitig (css ?) anzupassen.

    Ansonsten muss es halt so bleiben wie es jetzt ist, was aber auch gar nicht soo schlimm ist, denn saemtliche Links auf meiner Website sind entweder grafisch hinterlegt, oder per css unterstrichen (hover und active). És ist also auch ohne die Punkt-Umrandung sofort erkennbar auf welchem Link man sich befindet.

    Greetz, anexX

  • Übrigens macht nicht nur der Firefox diese Umrandungen für barrierefreies surfen.

    Auch Opera 8.5 für den NDS macht dies und dieser kümmert sich hinterher fast gar nicht um deine
    gebastelten Codes :)

    ...:AOD:...

    HP Chromebook 15a-nb0225ng, i3N-305, 8 GB LPDDR5-4800 MHz RAM (integriert), 256GB UFS, - chromeOS 135 (Stable Channel) - Linux Debian Bookworm: Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly

  • Zitat von anexX

    Alternativ würde ich mich ja überreden lassen die Umpunktung wieder zu aktivieren, wenn es wenigstens eine Möglichkeit gäbe die Farbe der Umpunktung serverseitig (css ?) anzupassen.

    Ja, das kann man per CSS anpassen. Definiere einfach eine Klasse für die betreffenden Links, also etwa

    Code
    <a class="umrand" href="...">

    und lege in deinem Stylesheet fest:

    Code
    a.umrand:focus
     {
      outline: 1px solid #00FF00;
     }

    In diesem Beispiel wird die Focus-Umrandung als dünne, durchgezogene, giftgrüne Linie angezeigt. Gepunktet kannst du durch "dotted" statt "solid" erreichen, weitere Möglichkeiten zeigt die die CSS-Referenz deiner Wahl. Wenn du diese Festlegung wirklich für alle Links treffen willst, kannst du die Klassendefinition natürlich weglassen.

    Zum Thema "man kann es nicht jedem recht machen" scheinen wir einfach zu unterschiedliche Ansichten zu haben. Ich erstelle Webseiten nicht für mich oder meine Kunden, sondern für die Anwender. Nichts gegen ein harmonisches und gut abgestimmtes Design, aber um die Seite für so viele Anwender wie möglich so optimal wie möglich nutzbar zu machen, nehme ich lieber Abstriche in den Buzz-Kategorein "clean" und "goodlooking" in Kauf.

    Du wirst zugeben müssen, dass deine Denkweise nicht gerade anwenderorientiert ist: "Damit mein Design bei vielen Anwendern haargenau so aussieht wie ich das will, nehme ich in Kauf, dass es für einige dafür praktisch unbenutzbar ist". Meine Meinung ist, dass die "Corporate Identity" soweit nicht gehen sollte und man bei jedem eingebauten Feature überlegen muss, ob es in die Kategorie "neckische Spielerei" fällt oder ob es dem Anwender wirklich Nutzen bringt. Möchte der Anwender, dass das Kontextmenü gesperrt ist? Nützt es dem Anwender, wenn er ein JavaScript-Popup nicht in der Größe verändern kann? Ist der Anwender darauf angewiesen, dass angewählte Links nicht hervorgehoben werden, auch wenn er keine Maus benutzen will oder kann?

    Diese und ähnliche Fragen kann man eigentlich nur mit nein beantworten. Die Frage ist dann, ob man sich danach richten will oder ob man seine Seite eben doch lieber für sich erstellt und nicht für seine Anwender. Häufig wird nur vergessen, dass auch alle Webmaster Anwender sind - fast überall.