Demo Navigation

[beatovich]

hallo

Wir haben immer wieder mal das Thema Navigation. Ich hab mich mal hingekockt und was ausgeheckt.

https://beat-stoecklin.ch/nav_demo.html

Mich würden eure Meinung und Kommentare freuen. Derzeit ist nur die horizontale Navigation berücksichtigt.

[marctrix]

Hej beatovich,

Wir haben immer wieder mal das Thema Navigation. Ich hab mich mal hingekockt und was ausgeheckt.

Cool! Finde ich toll!

https://beat-stoecklin.ch/nav_demo.html

Mich würden eure Meinung und Kommentare freuen. Derzeit ist nur die horizontale Navigation berücksichtigt.

Bisher habe ich mir die nur mit dem iPhone angesehen. Ohne JavaScript scheint sie gut zu funktionieren (man kann den Links halt nicht folgen, was vermutlich nicht nötig ist).

Mit JavaScript geht nichts auf…

Marc

[beatovich]

hallo

https://beat-stoecklin.ch/nav_demo.html

Bisher habe ich mir die nur mit dem iPhone angesehen. Ohne JavaScript scheint sie gut zu funktionieren (man kann den Links halt nicht folgen, was vermutlich nicht nötig ist).

Mit JavaScript geht nichts auf…

Mein Verdacht fällt auf

var l = document.querySelectorAll("#test1 nav > *").length;

wurde geändert zu

var l = document.querySelectorAll("#test1 nav > *"); l = l.length;

[Rolf B]

Hallo beatovich,

merkwürdiger Verdacht.

var l = document.querySelectorAll("#test1 nav > *").length; var l = document.querySelectorAll("#test1 nav > *"); l = l.length;

Diese beiden Zeilen sollten exakt die gleiche Wirkung haben.

Das Menü sieht ganz schick aus. Du musst aber aufgeklappte Menüs auch beim Rückwärts-Tab schließen, wenn Du sie verlässt 😀. Ansonsten kann ich nur den Aufwand bewundern, den Du in die Dokumentation und Variantenbetrachtung gesteckt hast.

Rolf

[beatovich]

hallo

Das Menü sieht ganz schick aus. Du musst aber aufgeklappte Menüs auch beim Rückwärts-Tab schließen, wenn Du sie verlässt 😀. Ansonsten kann ich nur den Aufwand bewundern, den Du in die Dokumentation und Variantenbetrachtung gesteckt hast.

Rückwärts-Tab kommt auf die Traktandenliste. Das ist in der Tat notwendig!

Ich frag mich nur, ob das überhaupt ankommt, die Submenus als Layer so darzustellen.

[beatovich]

hallo

Das Menü sieht ganz schick aus. Du musst aber aufgeklappte Menüs auch beim Rückwärts-Tab schließen, wenn Du sie verlässt 😀. Ansonsten kann ich nur den Aufwand bewundern, den Du in die Dokumentation und Variantenbetrachtung gesteckt hast.

Rückwärts TAB ist jetzt gefixt (no-js) und gefixt (js).

Jetzt würd ich nur gerne noch dem Safari was sauberes liefern.

[Rolf B]

Hallo beatovich,

Rückwärts TAB ist jetzt gefixt (no-js) und gefixt (js).

Wenn Du damit sagen willst, dass die no-js Version noch ein bisschen schräg ist, stimme ich Dir zu. Wenn man vorwärts aus einem aufgeklappten Menü raustabbt, ist's nicht perfekt (Chrome 67). Ich klappe bspw. Archiv auf, tabbe vorwärts hinaus und gelange nach "2012" auf den (fokussierbar) Rahmen unter dem Menü, danach auf dem Reset-Button. Erwartet hätte ich, dass ich auf dem Kontakt-Link lande.

Aber irgendwo werden wohl ohne JS die Grenzen erreicht sein; und wenn man ohne JS eine perfekte Lösung abliefern könnte dann würde man kein JS brauchen.

Rolf

[beatovich]

hallo

Wenn Du damit sagen willst, dass die no-js Version noch ein bisschen schräg ist, stimme ich Dir zu. Wenn man vorwärts aus einem aufgeklappten Menü raustabbt, ist's nicht perfekt (Chrome 67). Ich klappe bspw. Archiv auf, tabbe vorwärts hinaus und gelange nach "2012" auf den (fokussierbar) Rahmen unter dem Menü, danach auf dem Reset-Button. Erwartet hätte ich, dass ich auf dem Kontakt-Link lande.

Ja, so läuft das bei mir auch ab.

Aber irgendwo werden wohl ohne JS die Grenzen erreicht sein; und wenn man ohne JS eine perfekte Lösung abliefern könnte dann würde man kein JS brauchen.

Wer JS kontrolliert, wird sich bewusst sein, dass das Mängel in der Tastaturbedinung sind. Der Hauptakzent soll sein, dass eine Bedienung auch ohne JS möglich ist, nicht dass sie unfallfrei ist.

Wichtig is mir hier die Skalierbarkeit, das heisst, das JS/CSS setzt nicht ganz bestimmtes Markup voraus (ausser dass es von Sprasamkeit des Markups ausgeht)

Mit details/summary bewege ich mich noch im unsicheren Gelände. Im nächsten Update wird ein polyfill enthalten sein (ganz ungeprüft).

Ein anderes Verfahren wäre, mit JS die details elemente ganz zu ersetzen mit meiner https://beat-stoecklin.ch/klapperlogic.html

Dann hätte ich die besten der 2 Welten: Klappboxen ohne JS und besseren Support mit JS

[marctrix]

Hej beatovich,

https://beat-stoecklin.ch/nav_demo.html

Mit JavaScript geht nichts auf…

Mein Verdacht fällt auf

var l = document.querySelectorAll("#test1 nav > *").length;

wurde geändert zu

var l = document.querySelectorAll("#test1 nav > *"); l = l.length;

funktioniert leider immer noch nicht…

Marc

[beatovich]

hallo

https://beat-stoecklin.ch/nav_demo.html

wurde geändert zu

var l = document.querySelectorAll("#test1 nav > *"); l = l.length;

funktioniert leider immer noch nicht…

caniuse nennt für el.contains() Implementationsmängel für Safari. Kann mir aber nicht vorstellen, dass das die Ursache ist.

[beatovich]

hallo

Hier das JS, vielleicht entdeckt jemand, was den Safari stören könnte

function inittest1(){

function closeDetail(ev){
	ev.target.parentElement.firstChild.click();
	ev.target.parentElement.firstChild.focus();
}
var test1=document.getElementById("test1");
//	 Hamburger:  linear-gradient(to bottom, #444 0%, #444 20%, #fff0 20%, #fff0 40%, #444 40%, #444 60%, #fff0 60%, #fff0 80%, #444 80%, #444 100%)
var l = document.querySelectorAll("#test1 nav > *");
	l = l.length;
document.getElementById("test1_css").innerText += "\
	#test1 nav details > button:last-child { position:absolute; left:-200em; }\
	#test1 nav > :first-child{display:none}\
	@media screen and (max-width:"+ l * 7 +"em){\
		#test1 .hamburger { background: #fff6; border:0; font-weight:bold; text-transform:uppercase; width:100%;}\
		#test1 .hamburger:before { speak:none; content:url('favicon.ico'); \
			border-radius:4mm; font-size:8mm; line-height:8mm; vertical-align:-0.3em; margin-right:0.2em; }\
		#test1 nav:not(:focus-within) > :not(:first-child){ flex: 0 1 0; padding:0; overflow:hidden;  }\
		#test1 nav:not(:focus-within) > :first-child{display:block}\
	}\
";
var nav = document.querySelector("#test1 nav");
var b1 = document.createElement("button");
	b1.innerHTML="Menu";
	b1.className="hamburger";
	b1.addEventListener("focus", function(ev){ ev.target.nextElementSibling.focus(); } );
	nav.insertBefore(b1,nav.firstChild);
if(document.contains){
	document.body.addEventListener("click", function(ev){
		if( nav.querySelector("details[open]") && ! nav.contains(ev.target)){ 
			var col = nav.querySelectorAll("details[open]")
			for(var i=0; i< col.length; i++){
				col[i].open = false;
			}
		};
	});
}
var col = document.querySelectorAll("#test1 nav a");
for(var i=0; i< col.length; i++){
	if( col[i].href == document.location || col[i].href == "" ){
		col[i].setAttribute("aria-current", "page");
	}
}
col = test1.querySelectorAll("nav details");
for(var i=0; i< col.length; i++){
	var button = document.createElement("button");
	button.innerText="Close";
	button.addEventListener("focus",closeDetail);
	col[i].appendChild(button);
}

}
//document.addEventListener('DOMContentLoaded', inittest1, false);

[marctrix]

Hej beatovich,

Hier das JS, vielleicht entdeckt jemand, was den Safari stören könnte

Damit bin ich überfordert, werde aber gerne weiter testen, wenn gewünscht.

Marc

[Rolf B]

Hallo marctrix,

gibt's denn keine Möglichkeit, dem iSafari ein Error-Log zu entlocken? Das könnte möglicherweise weiterhelfen.

Rolf

[marctrix]

Hej Rolf,

gibt's denn keine Möglichkeit, dem iSafari ein Error-Log zu entlocken? Das könnte möglicherweise weiterhelfen.

Da ich nicht so fit in JS bin, kenne ich mich mit dem Debugger auch cniht so aus. Die einzige Meldung, die ich gefunden habe, ist auf dem Screenshot. Den lade ich mal hoch, dann könnt ihr euch auch wünschen, wo ich noch drauf klicken soll 😀

Marc

[beatovich]

hallo

Hier das JS, vielleicht entdeckt jemand, was den Safari stören könnte

Damit bin ich überfordert, werde aber gerne weiter testen, wenn gewünscht.

Wäre noch gut, deine Safari iOS Version zu wissen. Vielleicht finde ich es noch raus.

Safari ist zudem anfälliger bei Code, der nicht sehr valide ist. Da gibts derzeit eine kleine Baustelle.

Deiner Experience nach sollte mindestens https://beat-stoecklin.ch/klapperlogic.html Im Safari sauber arbeiten.

Bestätigung kann helfen den Fehler einzugrenzen.

[pl]

hi,

mich würde mal Deine Projektverwaltung interessieren. Gibt es die in elektronischer Form?

MfG

[beatovich]

hallo

mich würde mal Deine Projektverwaltung interessieren. Gibt es die in elektronischer Form?

Auf dem Server liegen nur statische Dateien.

KISS

[pl]

.. wird über das Menu des Browsers möglich sein. Das habe ich neulich irgendwo gelesen und das funktioniert so, daß dafür eine XML-Datei bereitgestellt werden muss, also auch als Link im <head>-Bereich.

Ist ja eigentlich naheliegend, hier endlich mal einen Standard zu schaffen 😉

MfG

[beatovich]

hallo

.. wird über das Menu des Browsers möglich sein. Das habe ich neulich irgendwo gelesen und das funktioniert so, daß dafür eine XML-Datei bereitgestellt werden muss, also auch als Link im <head>-Bereich.

Ist ja eigentlich naheliegend, hier endlich mal einen Standard zu schaffen 😉

Browser und Standards werden primär durch Bedürfnisse der Wirtschaft hervorgebracht, nicht durch die Wünsche der User oder einfachen Webautoren.

In seltenen Fällen gelingt es, dass Konsumenten den Browser ihre Wünsche aufzwingen können, aber nur deshalb, weil man die Konsumenten nicht vergraulen will.

Wir könnten uns zwar verschwören zu <nav automation="true">, und uns gegenseitig beweisen, dass wir dazu die besten Browser-Plugins schreiben können. Aber Breitenwirkung hat das nicht. Das ist bestenfalls eine Freakshow.

[pl]

hallo

.. wird über das Menu des Browsers möglich sein. Das habe ich neulich irgendwo gelesen und das funktioniert so, daß dafür eine XML-Datei bereitgestellt werden muss, also auch als Link im <head>-Bereich.

Ist ja eigentlich naheliegend, hier endlich mal einen Standard zu schaffen 😉

Browser und Standards werden primär durch Bedürfnisse der Wirtschaft hervorgebracht, nicht durch die Wünsche der User oder einfachen Webautoren.

Wow! Das ist ja richtig revolutionär was Du da schreibst!!! Full Ack!!!

Und schöne Güße 😉

PS: Ich weiß nicht mehr wo ich das gelesen habe. Daß Browser anhand geschachtelter <option>-Elements Menus aufbauen können/sollen ist ja auch nichts Neues, das war vor 20 Jahren schon Thema in SELFHTML. Aber vielleicht ist es ja gerade der e:Kommerz wo hier die Entwicklung vorantreibt, vielleicht gibt es ihn ja schon, den neuen Shoppingbrowser 😉

[marctrix]

Hej pl,

Browser und Standards werden primär durch Bedürfnisse der Wirtschaft hervorgebracht, nicht durch die Wünsche der User oder einfachen Webautoren.

Wow! Das ist ja richtig revolutionär was Du da schreibst!!!

Nö! Einen Irrweg nochmals einzuschlagen nennt man anders: das Wort, was du meinst, heißt reaktionär.

Marc

[marctrix]

Hej beatovich,

.. wird über das Menu des Browsers möglich sein. Das habe ich neulich irgendwo gelesen und das funktioniert so, daß dafür eine XML-Datei bereitgestellt werden muss, also auch als Link im <head>-Bereich.

Ist ja eigentlich naheliegend, hier endlich mal einen Standard zu schaffen 😉

Browser und Standards werden primär durch Bedürfnisse der Wirtschaft hervorgebracht, nicht durch die Wünsche der User oder einfachen Webautoren.

Doch. Siehe description list statt definition list, die Wiedereinführung von i und b im HTML5-Standard, placeholder, dialog, summary und details um nur ein paar Beispiele zu nennen, was in den HTML-Standard aufgenommen wurde, weil massenweise Entwickler für diese Dinge Lösungen per js bereit gestellt haben.

Das was wir massenweise nutzen, findet auch den Weg in den Standard. Und wir Entwickler sind diejenigen, die die Webseiten so bauen und nicht anders. Wir interpretieren die Wünsche unserer Kunden (Firmen und Geschäftsleute) so, dass wir uns für diese technische Umsetzung entscheiden.

Den Firmen ist die Technik doch Wurst.

Ja es gibt Dinge wie drm die standardisiert werden, weil da viel Druck von der Wirtschaft kommt. Das sind aber vergleichsweise wenig HTML-Elemente und -Attribute.

Was ich hier noch nie gehört habe: „In den Standard kommen doch eh nur Sachen, die irgendwelche Wissenschaftler am CERN benötigen.“

Dabei hat ein Wissenschaftler des CERN HTML wohl mehr geprägt, als jede andere Einzelperson danach. Damit wäre der Satz viel eher an der Wahrheit. Aber Wahrheit ist bei politischem Dogmatismus eh ziemlich lästig, deshalb werde ich euch damit wohl nicht überzeugen.

So jetzt seid ihr dran. Verschwörungstheorien in drei, zwei, eins…

Marc

[beatovich]

hallo

Bitte sag mir nicht Chrome eilt so voran, weil die privaten Nerds so ungestüm sind. Nein, Google möchte seine Produkte verkaufen.

Seltene Ausnahmen bestätigen die Regel.

Kannst ja was beitragen. Hier ein Anliegen

<details name="group1">
<details name="group1">

Erwünschtes verhalten: Maximal 1 details Element der gleichen name-Gruppe kann das Attribut open haben.

Da sollte eigentlich jeder drauf kommen.

[marctrix]

Hej beatovich,

Bitte sag mir nicht Chrome eilt so voran, weil die privaten Nerds so ungestüm sind. Nein, Google möchte seine Produkte verkaufen.

Klar. Normal. Wenn ich ein Werkzeug entwickel, entwickle ich es so, dass ich in erster Linie meine Aufgabe damit erledigen kann. Und das machst du auch und Google auch.

Mich stört das nicht und ich finde es legitim. Nichts anderes hat Tim Barners-Lee getan.

Übel finde ich allerdings, wofür Google seine Werkzeuge verwendet. Und klar, das merkt man schon der Entwicklung an. Nun ist Google aber glücklicherweise nicht allein im W3C und dass nicht jeder deiner Wünsche von Google persönlich umgesetzt wird, wirst du doch nicht ernsthaft erwarten. Und dass Google eigene Interessen vertritt hat glücklicherweise auch nicht verhindert, dass Anwenderbesürfnisse in den Standard Einzug gehalten haben.

Übrigens: die Forschungsergebnisse, die Barners-Lee und Kollegen geteilt haben können durchaus auch in militärische Entwicklungen geflossen sein. Ist „das Militär“ besser als „die Wirtschaft“?

Und was hat das für einen Einfluss auf die gerechte Einflussnahme bei der Weiterentwicklung von HTML? Was wäre denn deiner Meinung nach gerecht?

Viele Grüße,

Marc

[beatovich]

hallo

Hej beatovich,

Bitte sag mir nicht Chrome eilt so voran, weil die privaten Nerds so ungestüm sind. Nein, Google möchte seine Produkte verkaufen.

Klar. Normal. Wenn ich ein Werkzeug entwickel, entwickle ich es so, dass ich in erster Linie meine Aufgabe damit erledigen kann. Und das machst du auch und Google auch.

Ja, aber du bist doch auf die Anwendung von Standards reduziert. Werkzeuge entwickeln ist hier nicht das Thema, sondern die Frage, wer zur Hauptsache diese Standards definiert.

Übrigens: die Forschungsergebnisse, die Barners-Lee und Kollegen geteilt haben können durchaus auch in militärische Entwicklungen geflossen sein. Ist „das Militär“ besser als „die Wirtschaft“?

Militär IST Wirtschaft.

Und was hat das für einen Einfluss auf die gerechte Einflussnahme bei der Weiterentwicklung von HTML? Was wäre denn deiner Meinung nach gerecht?

Lobbies entscheiden über die Form von Standards. Dass diese Lobbies nicht immer einig sind zeigt sich ja zwischen WhatWG und w3c.

Wir kümmern uns nicht um die Gerechtigkeit, wenn wir Browser aufbohren und ihnen ein nicht vorgesehenes Verhalten geben.

Ja in Teilbereichen gibt es sowas wie die User-Lobby. Du wirst sie gerade im Bereich der Privacy finden.

Jedoch fanden die DSGVO-Autoren das nicht als Anlass, dies zu einem neuen Standard zu machen, und gewisse Defaults den Browsern zu gebieten. Statt dessen denkt man, Privacy gehört in die Hände der Wirschaft.