Gerrit: Bild sensitiv machen

0 53

Bild sensitiv machen

Gerrit
  • css
  • html
  1. 0
    Der Martin
    • css
    • html
    • javascript
    1. 0
      Gerrit
      1. 0
        Gunnar Bittersmann
        • meinung
        1. 0
          Gerrit
          1. 0
            Rolf B
    2. 0
      Gunnar Bittersmann
      • html
      1. 0
        Der Martin
        1. 0
          Gerrit
          1. 0
            Tabellenkalk
          2. 0
            Rolf B
            1. 0
              JürgenB
              1. 0
                Rolf B
                1. 0
                  JürgenB
                  1. 0
                    Rolf B
                  2. 0
                    MudGuard
          3. 0
            Rolf B
            1. 1
              Rolf B
              1. 0
                Matthias Scharwies
              2. 1
                JürgenB
                1. 0
                  Rolf B
              3. 0
                kai345
                1. 0
                  Rolf B
                  1. 0
                    kai345
              4. 0
                Gerrit
            2. 0
              Gerrit
              1. 0
                Gunnar Bittersmann
                1. 0
                  Tabellenkalk
                  1. 0
                    Matthias Apsel
                    1. 0
                      Matthias Apsel
                      • html
                      • menschelei
                2. 0
                  Rolf B
                  1. 0
                    Gerrit
                    1. 0
                      Rolf B
                      1. 0
                        Gerrit
                        1. 0
                          Matthias Apsel
                          1. 0
                            Der Martin
                            • browser
                            1. 0
                              JürgenB
                              1. 0
                                Der Martin
                                1. 0
                                  Rolf B
                                  1. 0
                                    Der Martin
                            2. 0
                              Gerrit
                      2. 0
                        JürgenB
                      3. 0
                        Gerrit
                        1. 0
                          Gunnar Bittersmann
                          • css
                        2. 0
                          Rolf B
                          1. 0
                            Gunnar Bittersmann
                            • zu diesem forum
                            1. 0
                              Tabellenkalk
                            2. 0
                              Matthias Apsel
                            3. 0
                              Gerrit
                              1. 0
                                Gerrit
                                • css
                                • html
                                • zu diesem forum
                                1. 0
                                  Rolf B
                                2. 0
                                  JürgenB
                                3. 0
                                  Gunnar Bittersmann

Hallo,
wenn ich auf ein Bild klicke, soll ein zunächst unsichtbarer Bereich (z.B. div) nach Möglichkeit ohne Javascript sichtbar gemacht werden? Geht dies und finde ich dann im Wiki etwas (womit muss ich suchen)?

  1. n'Abend.

    wenn ich auf ein Bild klicke, soll ein zunächst unsichtbarer Bereich (z.B. div) nach Möglichkeit ohne Javascript sichtbar gemacht werden?

    ist das eine Frage.[1]

    Geht dies und finde ich dann im Wiki etwas (womit muss ich suchen)?

    Das mag unter sehr speziellen Voraussetzungen möglich sein, aber für den allgemeinen Fall ist die Antwort: Nein. Nur mit Javascript-Unterstützung.

    Für eine spezifischere Antwort müsstest du schon ein bisschen von deinen Gegebenheiten zeigen.

    Live long and pros healthy,
     Martin

    --
    Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.
    (mit freundlichem Dank an Tabellenkalk für die Ergänzung 😀)

    1. Tipp: Feststellungen (Aussagesätze) schließt man normalerweise mit einem Punkt ab, nicht mit einem Fragezeichen. ↩︎

    1. Dieser Beitrag wurde gesperrt: Ab hier beginnt ein unkonstruktiver Flamewar

      Danke, auf Rechtschreibtipps kann ich verzichten. Dazu gibt es andere Foren. Wenn ich erst noch auf Flüchtigkeitsfehler prüfen muss, dann bin ich hier wohl falsch! n'Abend genügt im übrigen auch nicht den deutschen Rechtschreibregeln! A+

      1. @@Gerrit

        Findest du es klug, in die Hand zu beißen, die dich füttert?

        Ich finde das ziemlich dumm.

        😷 LLAP

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        1. @Gunnar

          Ich finde das ziemlich dumm.

          Ich finde es ziemlich dumm, wenn man anstatt zu helfen, schulmeisterliche Belehrungen absondert.

          1. Hallo Gerrit,

            du hast, nachdem Martin aus deiner Frage nicht ganz schlau geworden ist, von Gunnar den Hinweis auf details/summary bekommen. Möchtest Du vielleicht lieber dazu was sagen? Ist das etwas, was Dir hilft? Das kannst Du unter Gunnars Beitrag mit dem Link zu seinem Codepen gern tun.

            Oder passt das nicht zu deinen Vorstellungen (könnte ja durchaus sein). Dann könntest Du die an dieser Stelle genauer darstellen.

            Zum Thema "dumm" etc. setze ich nun noch mein Moderatoren-Käppi auf 🤠:

            ask("Bitte lasst es gut sein", MODE_NICELY);
            flameWar.abort();
            branch.close();
            

            Rolf

            --
            sumpsi - posui - obstruxi
    2. @@Der Martin

      Das mag unter sehr speziellen Voraussetzungen möglich sein

      Wie ein moderner Browser?

      Nein. Nur mit Javascript-Unterstützung.

      Look Ma, no JavaScript.

      😷 LLAP

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      1. Hallo Gunnar,

        Das mag unter sehr speziellen Voraussetzungen möglich sein

        Wie ein moderner Browser?

        den hatte ich sowieso vorausgesetzt. Ich dachte eher an ein durch CSS beschreibbares Verhältnis von Bild und dem dynamisch sichtbaren Element.

        Das hast du in deinem Pen einfach vorausgesetzt. Ich nicht, weil ich es in Gerrits Schilderung nicht erkennen konnte.

        Live long and pros healthy,
         Martin

        --
        Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.
        (mit freundlichem Dank an Tabellenkalk für die Ergänzung 😀)
        1. Hi, ich habe das Beispiel von Gunnar angesehen. Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe. Gedacht habe ich an so etwas wie das Bild mit 3 Balken. Wenn man darauf klickt, öffnet sich ein Auswahlbereich.

          1. Hallo,

            Gedacht habe ich an so etwas wie das Bild mit 3 Balken.

            Ah, du suchst ein "Hamburger-Menü"…
            Das ist im Wiki eine Weiterleitung auf Grundstruktur der Navigation. Da ist aber leider der Hamburger nicht erwähnt...

            Gruß
            Kalk

          2. Hallo Gerrit,

            Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe.

            Aber Du hättest recherchieren können, was die Dir unbekannten Elemente <details> und <summary> tun 😉. Ein vollständiges Menü mit details/summary hat Jürgen einmal in unserem Wiki aufgeschrieben. Auf einem genügend schmalen Bildschirm kollabiert es auch zu einem "Hamburger"-Button. Leider mit viel JavaScript dabei, also nicht das, was Du willst. Aber vielleicht kannst Du dort ein paar Ideen abgucken.

            Für eine reine CSS Lösung ist details/summary aber eigentlich der beste Ansatz, andere Lösungen wie :hover oder Checkbox-Hack leiden an fehlender Bedienbarkeit (was meint: Bedienbarkeit für jeden, ob Maus, Touch, Tastatur, Screenreader oder Braille-Zeile). Du hängst da allerdings die kleine Schar derjeniger ab, die noch zur Nutzung des Internet Explorers gezwungen sind. Die bekommst Du nur mit einer Javascript-Lösung richtig unterstützt.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Hallo Rolf,

              … Ein vollständiges Menü mit details/summary hat Jürgen einmal in unserem Wiki aufgeschrieben. Auf einem genügend schmalen Bildschirm kollabiert es auch zu einem "Hamburger"-Button. Leider mit viel JavaScript dabei, …

              das viele Javascript ist aber nur dem Komfort und dem IE11 und den alten Edge geschuldet. Ich habe leider keine Möglichkeit gefunden, schon im css Browser zu erkennen, die details/summary nicht unterstützen.

              Im fiddle aus der anderen Antwort verwendest du

              @supports (width: max-content) {
                ...
              }
              

              Damit wird aber nur der IE11 gefunden, nicht aber alte Edge?

              Gruß
              Jürgen

              1. Hallo JürgenB,

                das war jetzt ein reiner Glücksgriff mit max-content. Edge-Edge kann @supports, aber details und max-content werden beide erst mit Chromium-Edge eingeführt. Sagt caniuse jedenfalls.

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Hallo Rolf,

                  der erkennst also den IE11 nur dran, dass er supports nicht kennt.

                  Wenn ich eine Möglichkeit hätte, auch MS-Edge im css zu erkennen, wäre die Navigation im Wiki-Tutorial nicht so Javascriptabhängig.

                  Gruß
                  Jürgen

                  1. Hallo JürgenB,

                    dann nimm doch max-content. Das ist zwar eine leicht unredliche Abfrage, aber da wir von einem Blick in die Historie reden, passt das.

                    MDN sagt, dass heute alle Browser außer Edge-Edge und IE max-content unterstützen. MDN sagt, dass heute alle Browser außer Edge-Edge und IE <details> unterstützen.

                    If it walks like duck, swims like a duck and quacks like a duck, I call it a duck...

                    Rolf

                    --
                    sumpsi - posui - obstruxi
                  2. Hi,

                    der erkennst also den IE11 nur dran, dass er supports nicht kennt.

                    Wenn ich eine Möglichkeit hätte, auch MS-Edge im css zu erkennen, wäre die Navigation im Wiki-Tutorial nicht so Javascriptabhängig.

                    leider wurde

                    * html {} 
                    

                    zu früh abgeschafft …

                    cu,
                    Andreas a/k/a MudGuard

          3. Hallo Gerrit,

            mein naiver Versuch mit details sähe so aus: https://jsfiddle.net/Rolf_b/gc1j4drL/

            Das ::marker Pseudoelement ist seit Oktober 2020 in den Evergreen-Browsern nutzbar. Für den Internet Explorer habe ich noch eine Browserweiche drin, mit @supports. Das kennt der IE nicht, das Menü ist dann ständig offen.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Nachtrag: Bei der Gelegenheit habe ich festgestellt, dass sich bei ::marker einiges in der Browser-Unterstützung getan hat. Zudem polemisiert der Text in unserem Wiki darüber, dass die Browser Müll machen würden - aber einiges von diesem Müll steht gar nicht (mehr) in der Spec; die Formatierungsmöglichkeiten des ::marker Pseudoelements sind limitiert.

              Insbesondere sieht die Spec nicht vor, eine Positionierung oder transform:scale einzusetzen. Ich habe diese Teile aus dem Wiki entfernt (@Matthias Apsel - du hattest das geschrieben). Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?

              Rolf

              --
              sumpsi - posui - obstruxi
              1. Servus!

                Ich habe diese Teile aus dem Wiki entfernt

                Vielen Dank!

                Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?

                Herzliche Grüße

                Matthias Scharwies

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
              2. Hallo Rolf,

                details-marker:

                Safari
                zu: roter Pfeil nach rechts offen: grüner Pfeil nach unten Klick außerhalb des Elements: roter Pfeil nach unten

                MacOS Firefox
                Kennt das Symbol nicht und zeigt „Kasten“

                details mit eigenem Marker:

                Safari
                zeigt grünes + und rotes x wie vorgesehen, die Originalsymbole bleiben aber.

                MacOS Firefox
                OK

                Im Tutorial behandle ich die Symbole browserübergreifend so:

                /* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
                #sitenav summary::-webkit-details-marker { 
                	display: none; 
                }
                #sitenav summary { 
                	list-style-type: none; 
                }
                #sitenav details summary::after { 
                	font-family: arial_unicode_ms; 
                	vertical-align: top; 
                }
                #sitenav ul details:not([open]) > summary::after { 
                	content: ' ►'; 
                }
                #sitenav ul details[open] > summary::after { 
                	content: ' ◄'; 
                

                Gruß
                Jürgen

                1. Hallo JürgenB,

                  Safari
                  zu: roter Pfeil nach rechts
                  offen: grüner Pfeil nach unten
                  Klick außerhalb des Elements: roter Pfeil nach unten

                  WTF? Grüner Pfeil nach unten sollte angezeigt werden, wenn die Details zu sind und öffnet sie. Das andere Ding soll ein roter Pfeil nach oben sein und die Details schließen.

                  Liegt das am verwendeten Font? Das Frickl verwendet Zeichen aus Plane 1 (Navigation Arrows):
                  🡱 - 1f871 - Pfeil nach oben
                  🡳 - 1f873 - Pfeil nach unten

                  Nachdem ich die hier eingefügt hatte, ist erstmal auch die Edit-Box des Forums ausgeflippt. Die "normalen" Pfeile ↑ und ↓ sind allerdings recht unansehnlich. Hier im Forum geht's noch, im Frickl gar nicht (Chrome/Windows). Aber was gibt's in der BMP? ⭣⬇⮯⮋⮛⮟, alles nicht so dolle. Im SMP Block "zusätzliche Pfeile C" gibt es eine Inflation an Pfeilen: 🠋🠟🡇🡫🡳🡻🢃🢛 - aber wenn die nicht sauber dargestellt werden ist es Käse. Ich mag in so ein einfaches Beispiel aber auch kein SVG-Bild einfügen oder mit CSS-Tricks einen Pfeil generieren.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
              3. Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?

                Opera Windows:

                --
                Stur lächeln und winken, Männer!
                1. Hallo kai345,

                  das ist natürlich total blöd - da sind die Open/Close Symbole gar nicht ersetzt worden. War das Opera 73 oder 74?

                  Edit: Hab mir den aktüllen Opera 74 nun selber installiert. Content wird ignoriert, Farben, font-size und transition funktionieren. Und ::marker funktioniert nicht, es muss die -webkit Variante sein. Angeblich basiert Opera 74 auf Blink 88, da muss wohl zwischen 88 und 89 noch was passiert sein.

                  Fun Fact: da ein summary-Element den Anzeigetyp display:list-item hat, kann man mit list-style-type: "🡱" das Symbol ebenfalls setzen. In Chrome jedenfalls.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. Edit: Hab mir den aktüllen Opera 74 nun selber installiert. Content wird ignoriert, Farben, font-size und transition funktionieren. Und ::marker funktioniert nicht, es muss die -webkit Variante sein. Angeblich basiert Opera 74 auf Blink 88, da muss wohl zwischen 88 und 89 noch was passiert sein.

                    Opera 75 beta [Chromium 89]:

                    Ansicht in Opera75beta - zu
                    Ansicht in Opera75beta - offen

                    --
                    Stur lächeln und winken, Männer!
              4. Hallo Rolf,
                besten Dank für das Beispiel. Wenn es in den gängigsten Browsern läuft, so genügt dies mir am Anfang auch.
                Ich finde solche Beispiele (für meine Herangehensweise) ideal.
                Ich muss nicht zuerst (neben einer Einführung) alles über flex oder grid lesen, sondern ich habe sofort ein Ergebnis, auf dem ich aufbauen kann.
                Und ich kann dann gezielt nachschauen, was die einzelnen für mich unbekanten Elemente/Parameter bedeuten (learning ba doing). Schönen Gruß Gerrit

            2. Hallo Rolf, in Deinem jsfiddle-Beispiel ist die Struktur

              <header>
                <nav>
                ......
              

              Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:

              <!doctype html>
              <html lang="de">
                <head>
                   …
                </head>
                <body>
                  <header>
                    <h1>Name unserer Seite</h1>
                  </header>
                  <nav>
                    …
                  </nav>
                  <main>
                    <h1>Überschrift des Artikels</h1>
                    <p>weiterer Inhalt</p>
                  </main>
                </body>
              </html>
              
              

              Kann ich, damit Dein Beispiel passt das <nav> in <article></article> oder etwas ähnliches einbetten und das CSS entsprechend abändern? Ein anderer Weg wäre statt header das nav zu verwenden und unter dem nav ein <div> zu setzen.Beides würde wohl so funktionieren, aber widerspricht es dann der Philosophie oder ist es dann nicht mehr barrierefrei?

              1. @@Gerrit

                Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:

                <!doctype html>
                <html lang="de">
                  <head>
                     …
                  </head>
                  <body>
                    <header>
                      <h1>Name unserer Seite</h1>
                    </header>
                    <nav>
                      …
                    </nav>
                    <main>
                      <h1>Überschrift des Artikels</h1>
                      <p>weiterer Inhalt</p>
                    </main>
                  </body>
                </html>
                
                

                Kannst du uns die Stelle In SELFHTML sagen, von wo du das übernommen hast, damit das dort berichtigt werden kann?

                Es ist nämlich falsch: „Name unserer Seite“ ist nicht h1, sondern p.

                „Überschrift des Artikels“ ist auf der Seite die h1 – und davon sollte es nur eine geben. (Das h in h1 steht für Highlander.)

                Kann ich, damit Dein Beispiel passt das <nav> in <article></article> oder etwas ähnliches einbetten und das CSS entsprechend abändern?

                In article wohl nicht, aber in div kannst du einbetten, was du willst. Warum solltest du das brauchen?

                Ein anderer Weg wäre statt header das nav zu verwenden und unter dem nav ein <div> zu setzen.Beides würde wohl so funktionieren, aber widerspricht es dann der Philosophie oder ist es dann nicht mehr barrierefrei?

                So ist es. HTML-Elemente sind nicht wahllos, sondern genau ihrer Bestimmung nach zu verwenden.

                „Name unserer Seite“ gehört nicht ins nav-Element. Das Navigationsmenü gehört in ein nav-Element.

                Und wenn es sich bei deinem Bild um ein Hamburger-Icon zum Öffnen des Menüs handelt, dann gehört dieser Button auch mit ins nav-Element.

                Und ja, ein button-Element, das per JavaScript das Menü auf- und zumacht und entsprechende Attribute für die Barrierefreiheit setzt.

                S.a. Beispiel und Hinweise auf den Folien „TIL wie man ein Menü serviert“.

                😷 LLAP

                --
                “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                1. Hallo,

                  es ist nicht einfach, sowas im Wiki zu finden, aber hier fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…

                  Gruß
                  Kalk

                  1. Hallo Tabellenkalk,

                    es ist nicht einfach, sowas im Wiki zu finden,

                    in der Tat.

                    aber hier fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…

                    Ich habe werde es mal geändert haben.

                    Bis demnächst
                    Matthias

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    1. Hallo Matthias Apsel,

                      aber hier fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…

                      Ich habe werde es mal geändert haben.

                      Das Beispiel selbst war schon seit 2014 korrekt, zu einer Zeit also, als das vielleicht noch gar nicht korrekt war.

                      Bis demnächst
                      Matthias

                      --
                      Du kannst das Projekt SELFHTML unterstützen,
                      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                2. Hallo Gunnar,

                  Und ja, ein button-Element, das per JavaScript das Menü auf- und zumacht

                  Du widersprichst der Idee, ein Dropdown-Menü mit details/summary zu realisieren? Genau darum geht es hier doch.

                  Du widersprichst damit auch dem Wiki-Artikel von Jürgen über eine zugängliche Dropdown-Navigation?

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. Hallo Ihr Lieben, jetzt bin ich aber total verwirrt! Welche Struktur und welche Art Dropdown-Menu ist "state of the art"? Gruß Gerrit

                    1. Hallo Gerrit,

                      ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.

                      Also, erstmal Ruhe bewahren, wir diskutieren das aus 😉

                      Die Button-Lösung ist die "klassische", braucht aber JavaScript. Die details/summary Lösung kommt ohne JS aus, aber der Internet Explorer kennt dieses Element noch nicht. Deswegen habe ich meinen Vorschlag so gebaut, dass er im IE einfach als "ständig offen" und ohne das Menübild dargestellt wird. Das ist nicht schön, aber die Seite ist nutzbar. Auf "schönes" Layout hat ein IE-Opfer heute keinen Anspruch mehr.

                      Rolf

                      --
                      sumpsi - posui - obstruxi
                      1. Hallo Rolf,
                        ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.
                        Gruß
                        Gerrit

                        1. Hallo Gerrit,

                          ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.

                          In den seltensten Fällen ist er wirklich selbst schuld.

                          Bis demnächst
                          Matthias

                          --
                          Du kannst das Projekt SELFHTML unterstützen,
                          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                          1. Hallo,

                            ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.

                            In den seltensten Fällen ist er wirklich selbst schuld.

                            dem schließe ich mich an. Meist sind es wohl Vorgaben des eigenen Arbeitgebers.

                            Während bei uns im Unternehmen die Menge der tatsächlich genutzten Browser recht vielfältig ist (Chrome in allen Geschmacksrichtungen einschließlich Microsoft, Firefox und Varianten[1]), empfiehlt unsere IT zumindest fürs Intranet immer noch den IE11. Der lässt sich nämlich so einstellen, dass er sich überall, wo eine Anmeldung gefordert ist, erstmal ungefragt mit den Windows-Credentials anzumelden versucht.
                            Das kann man als Vorteil oder als Risiko kommunizieren, je nachdem, wo man gerade steht.

                            Benutzt man einen anderen Browser fürs Intranet, muss man sich halt mit ständig aufpoppenden Login-Abfragen abfinden. Oder die Anmeldedaten für die diversen Dienste im Browser speichern. Das möchte ich aber auch wieder nicht.

                            Also fahre ich zweigleisig: Für hausinterne Web-Dienste (z.B. Sharepoint, das ESS-Modul von SAP oder das bei uns verwendete e-Learning-Portal) den alten IE, für externe Sites Pale Moon, seltener auch den "echten" Firefox.

                            Live long and pros healthy,
                             Martin

                            --
                            Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.
                            (mit freundlichem Dank an Tabellenkalk für die Ergänzung 😀)

                            1. Ein älterer Kollege benutzt sogar für alles nur den IE11. "Den bin ich gewöhnt, mit dem komme ich gut zurecht, ich brauch nichts anderes." ↩︎

                            1. Hallo Martin,

                              Meist sind es wohl Vorgaben des eigenen Arbeitgebers.

                              oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.

                              Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.

                              Über den Einsatz „moderner“ Javascriptmethoden, die den IE auf einen Syntaxfehler laufen lassen, sollte man aber schon nachdenken und evtl. statische Alternativen anbieten. Syntaktischer Zucker rechtfertigt nicht, alte Browser auszusperren.

                              Gruß
                              Jürgen

                              1. Hallo,

                                Meist sind es wohl Vorgaben des eigenen Arbeitgebers.

                                oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.

                                nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.

                                Firefox fragt beim Setup sogar, ob er Daten eines bereits vorhandenen Browsers übernehmen soll (z.B. Bookmarks). Chrome bestimmt auch, oder?

                                Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.

                                Für den hier aktuellen Fall: Ja, finde ich auch okay. Wer archaisches Zeug nutzt, ist daran gewöhnt, dass nicht immer alles so schick aussieht wie beim Nachbarn, möchte das vielleicht sogar so.

                                Über den Einsatz „moderner“ Javascriptmethoden, die den IE auf einen Syntaxfehler laufen lassen, sollte man aber schon nachdenken und evtl. statische Alternativen anbieten. Syntaktischer Zucker rechtfertigt nicht, alte Browser auszusperren.

                                Wohl wahr.

                                Live long and pros healthy,
                                 Martin

                                --
                                Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.
                                (mit freundlichem Dank an Tabellenkalk für die Ergänzung 😀)
                                1. Hallo Martin,

                                  nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.

                                  Die Arbeitsplätze meines Arbeitgebers laufen unter Windows 7 (ok, Windows Server 2008 R2 plus Citrix) und das Selbstinstallieren eines Chrome ist nicht möglich. Ein Firefox ist drauf, aber für bestimmte Anwendungen limitiert. Seit einem halben Jahr gibt's endlich einen aktuellen Edge und die neue Sharepoint-Version, die damit klar kommt.

                                  Eine Standardsoftware, die ich betreue, hatte bis vor kurzem noch ein Java Applet intus und ist immer noch nicht javafrei, sondern wurde vom Hersteller nur auf Java Webstart umgestellt.

                                  Dieses Jahr findet bei uns der zweite oder dritte Anlauf für eine Win10 Migration statt. Und beginnt wieder mal auf eine Art, die das Coronamanagement der deutschen Verwaltungen bewundernswert erscheinen lässt ("Liefern Sie uns umgehend Ihre Software fertig paketiert und getestet!" - "Wo ist der Testserver für mich, der nach Maßgaben der neuen Umgebung konfiguriert ist?" - "Äh, da haben wir grad keine Zeit für..." - einen Testserver in Eigenregie aufsetzen bringt nichts; zum einen darf ich das nicht und zum anderen weiß ich ja nicht, was die an Policies eindrehen, die mich ggf. abschießen)

                                  Manche Dinge sind einfach gruselig.

                                  Rolf

                                  --
                                  sumpsi - posui - obstruxi
                                  1. Hallo,

                                    nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.

                                    Die Arbeitsplätze meines Arbeitgebers laufen unter Windows 7 (ok, Windows Server 2008 R2 plus Citrix) und das Selbstinstallieren eines Chrome ist nicht möglich.

                                    geh bitte nochmal einen Schritt zurück. Ich sagte ganz bewusst: Wenn jemand den IE verwenden muss, ist das meistens eine vom Arbeitgeber verhängte Einschränkung.

                                    Manche Dinge sind einfach gruselig.

                                    Allerdings, ja.

                                    Live long and pros healthy,
                                     Martin

                                    --
                                    Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.
                                    (mit freundlichem Dank an Tabellenkalk für die Ergänzung 😀)
                            2. Hallo,

                              Ein älterer Kollege benutzt sogar für alles nur den IE11. "Den bin ich gewöhnt, mit dem komme ich gut zurecht, ich brauch nichts anderes."

                              Ich war auch zufrieden mit Windows XP.
                              Ja man kann natürlich auf alles Rücksicht nehmen.
                              Und ich wünschte mir dies für mein nicht sehr altes Smartphone, auf dem die Corona-App nicht lauffähig ist.

                      2. Hallo Rolf,

                        auf meiner(!) Site kennen z.Zt. von den Besuchern mit eingeschaltetem Javascript 2% kein details/summary, Tendez abnehmend. Laut caniuse sind es noch weniger. Es lohnt sich also nicht, da viel zu investieren. Im Wiki-Tutorial habe ich einen einfachen auf dieses Problem zugeschnittenen Poyfill, evtl. was für Gerrit. Ich habe auch beschrieben, wie dieser nur bei Bedarf nachgeladen wird. Über dieses Nachladen messe ich übrigens die 2%.

                        Gruß
                        Jürgen

                      3. Hallo Rolf

                        ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.

                        Also, erstmal Ruhe bewahren, wir diskutieren das aus 😉

                        Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht, oder seid Ihr noch tief in der Diskussion?
                        Schönen Gruß
                        Gerrit

                        1. @@Gerrit

                          darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.

                          Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht

                          Der hat gerade andere Schlachten zu schlagen. ⚔️

                          😷 LLAP

                          --
                          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                        2. Hallo Gerrit,

                          bei Dir gemeldet

                          Gunnar lebt in Berlin, ich bei Köln. Wenn wir kommunizieren, dann hier offen im Forum. Oder über Moderationsfälle im Intern-Forum. Vieraugen-Diskussionen als Privatchat haben wir bisher nur über "Mathe zum ..." geführt 😉

                          Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details", dann ist der Unterschied da wohl auch nicht so wichtig. Bei einem gravierenden Accessibility-Fehler hätte er sich sicherlich schon deutlicher geäußert.

                          Rolf

                          --
                          sumpsi - posui - obstruxi
                          1. @@Rolf B

                            Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …

                            Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.

                            😷 LLAP

                            --
                            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                            1. Hallo,

                              Es gibt hier keine 24/7-Anwesenheitspflicht.

                              Ist das neu?

                              Gruß
                              Kalk

                            2. Hallo Gunnar Bittersmann,

                              Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …

                              Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.

                              zu Ende lesen!

                              Bei einem gravierenden Accessibility-Fehler hätte er sich sicherlich schon deutlicher geäußert.

                              Bis demnächst
                              Matthias

                              --
                              Du kannst das Projekt SELFHTML unterstützen,
                              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                            3. Hallo Gunnar, hallo Rolf,
                              ich wollte auch nicht drängeln!
                              Ich schaue einfach ab und zu noch einmal vorbei.
                              Gruß
                              Gerrit

                              1. Hi,
                                ist Gunnar noch mit der CSS-Battle zugange?
                                Vielleicht kann mir jemand einen Tipp geben zu dem Problem:

                                Hier
                                schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.
                                Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?
                                Gruß
                                Gerrit

                                1. Hallo Gerrit,

                                  indem Du - wenn Du die Schachtelung der Elemente anders als in meinem Fiddle machst, auch das CSS entsprechend änderst.

                                  Die CSS Selektoren gehen von einer bestimmten Hierarchie der Elemente aus.

                                  Rolf

                                  --
                                  sumpsi - posui - obstruxi
                                2. Hallo,

                                  Hier
                                  schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.
                                  Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?

                                  im Tutorial mache ich das mit position: absolute, aber erst, nachdem ich sicher bin, das Javascript eingeschaltet ist, und ich prüfen kann, ob details/summary unterstütz wird und der Polyfill bei Bedarf geladen werden kann.

                                  Details/summary würde z.B. im IE bei absoluter Positionierung den Inhalt überdecken. Ich teste aber gerade eine reine CSS-Abfrage mit

                                  @supports (width: max-content) { /* Nicht für IE und MS-Edge */
                                  	#sitenav { position: absolute; }
                                  	#sitenav ul { position: absolute; }
                                  }
                                  

                                  Gruß
                                  Jürgen

                                3. @@Gerrit

                                  ist Gunnar noch mit der CSS-Battle zugange?

                                  Aber ja. 🐘🐑

                                  😷 LLAP

                                  --
                                  “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon