Wat is HTML5 Placeholder Links vir?
IDUp tot HTML5, die a-tag benodig een kenmerk: href. Maar HTML5 maak selfs daardie kenmerk opsioneel. As jy die a-tag skryf sonder enige eienskappe, word dit 'n plekhouer-skakel genoem.
'N Plekhouer skakel lyk soos volg:
VorigeGebruik van Placeholder Links tydens ontwikkeling
Byna elke webontwerper het op een of ander tyd plekhouerskakels geskep terwyl 'n webwerf ontwerp en gebou word. Voordat ons HTML5 skryf, skryf ons:
skakel teksas die plekhouer. En ek het mockup webwerwe na kliënte gestuur met die plekhouers net om die kliënt my te vra "hoekom werk die skakels in die teks nie?"
Die probleem met die gebruik van 'n hashtag (#) as 'n plekhouer skakel is dat die skakel klikbaar is, en dit kan verwarring vir jou kliënte veroorsaak. En as iemand dit vergeet om hulle met die korrekte URL's op te dateer, kan hierdie skakels gebreek word op die lewendige webwerf omdat hulle nie aan iets koppel nie.
In plaas daarvan moet jy begin met die gebruik van 'n etiket sonder enige eienskappe. Jy kan dit styl om soos enige ander skakel op jou bladsy te lyk, maar hulle sal nie kliekbaar wees nie omdat hulle net plekhouers is.
Gebruik van Plaashouerskakels op Live Sites
Maar plekhouerskakels het 'n plek in webontwerp vir meer as net ontwikkeling. Een plek waar 'n plekhouerskakel kan skyn, is in die navigasie. In baie gevalle het webwerf navigasie lyste een of ander manier om aan te dui watter bladsy jy is. Dit word dikwels "indicators" genoem.
Die meeste webwerwe maak staat op ID-eienskappe op die element wat die "jy is hier" -merker benodig, maar sommige gebruik ook die klas-eienskap. Maar wat jy ookal gebruik, moet jy 'n klomp werk doen aan elke bladsy wat die navigasie daarop het, en die kenmerk byvoeg en verwyder van die korrekte elemente.
Met 'n plekhouer skakel, kan jy jou navigasie skryf wat jy wil, en verwyder dan die href-kenmerk van die toepaslike skakel wanneer jy die navigasie na 'n bladsy byvoeg. Ek stoor my hele navigasielys as 'n fragment in my redakteur, so dit is net 'n vinnige kopie-plak en dan verwyder die href. Jy kan ook jou CMS kry om dieselfde ding te doen.
En behalwe die byvoeg van spesiale stilering (ek sal jou wys hoe hieronder) na 'n plekhouer skakel, is die skakel nie kliekbaar nie. Sodat kliënte nie verwar word nie, dink hulle dat hulle dalk iets anders kan kry as hulle op die navigasie skakel kliek waar hulle tans is.
Styling Placeholder Links
Plekhouerskakels is maklik om te styl en anders as die ander skakels op jou webblad. Maak seker dat jy die a-tag en die a-skakel-tag styl. Byvoorbeeld:
'n (kleur: rooi; font-weight: bold; teks versiering: geen; } a: skakel {kleur: blou; font-gewig: normaal; teks-versiering: onderstreep; }Hierdie CSS sal plekhouerskakels vet en rooi maak, sonder onderstreping. Terwyl gereelde skakels van normale gewig, blou en onderstreep sal wees.
Onthou om enige style wat jy nie van die a-tag wil oorgedra te herstel nie. Byvoorbeeld, ek het die lettertipe gewig ingestel vir die plekhouerskakels, so ek moes dit opstel:
font-gewig: normaal;vir die standaard skakels. Dieselfde geld met die teksversiering, deur dit met 'n selector te verwyder, sou dit vir die a: skakel seleksie verwyder gewees het as ek dit nie teruggehou het nie.