Dlaczego CSS działa z fałszywymi elementami?

438

W mojej klasie bawiłem się i odkryłem, że CSS działa z gotowymi elementami.

Przykład:

imsocool {
    color:blue;
}
<imsocool>HELLO</imsocool>

Kiedy mój profesor po raz pierwszy zobaczył, że go używam, był nieco zaskoczony, że wykonane elementy działają, i zalecił, żebym po prostu zmienił wszystkie moje wykonane elementy na akapity z identyfikatorami.

Dlaczego mój profesor nie chce, abym używał gotowych elementów? Działają skutecznie.

Ponadto, dlaczego nie wiedział, że wymyślone elementy istnieją i współpracują z CSS. Czy są rzadkie?

Jordan Chill Mcgee Ludgate
źródło
62
HTML to sposób nadawania znaczenia danym, które mogą być zrozumiane przez wiele różnych mediów (w tym ludzi i przeglądarki). Twoje wymyślone tagi nie dodają żadnego znaczenia. To jeden z wielu powodów, dla których nie chce, żebyś ich używał.
punkrockbuddyholly,
59
@MrMisterMan tak naprawdę myślę, że tak. Co jest bardziej znaczące - <p>555-212-2344</p>lub <supportPhone> 555-212-2344 </supportPhone>
Yuriy Galanter
169
@YuriyGalanter <p class = "supportPhone">; P
punkrockbuddyholly
30
@MrMisterMan Pamiętaj tylko, że wszystkie te reguły i konstrukcje programistyczne zostały stworzone przez ludzi nie mądrzejszych od ciebie i możesz to zmienić, możesz na to wpłynąć, możesz zbudować własne rzeczy, z których inni mogą korzystać.
L_7337,
90
Mogę zauważyć, że to, co robisz, to w zasadzie XML, a nie HTML. XML jest bardziej abstrakcyjnym językiem znaczników, który pozwala reprezentować dane w „użyteczny” sposób, który opisujesz - tj. z dołączonym znaczeniem semantycznym. Następnie można użyć transformacji XSLT do renderowania danych w formacie HTML
OSE

Odpowiedzi:

470

Dlaczego CSS działa z fałszywymi elementami?

(Większość) przeglądarek zaprojektowano tak, aby były (do pewnego stopnia) kompatybilne z przyszłymi dodatkami do HTML. Nierozpoznane elementy są analizowane w DOM, ale nie są powiązane z semantyką ani specjalnym domyślnym renderowaniem.

Po dodaniu nowego elementu do specyfikacji czasami CSS, JavaScript i ARIA mogą być używane w celu zapewnienia tej samej funkcjonalności w starszych przeglądarkach (a elementy muszą pojawiać się w DOM, aby te języki mogły nimi manipulować, aby dodać tę funkcjonalność ).

(Chociaż należy zauważyć, że trwają prace nad zdefiniowaniem sposobu rozszerzenia HTML za pomocą niestandardowych elementów , ale ta praca jest obecnie na wczesnym etapie rozwoju, więc prawdopodobnie należy jej unikać, dopóki nie dojrzeje).

Dlaczego mój profesor nie chce, abym używał gotowych elementów?

  • Nie są one dozwolone przez specyfikację HTML
  • Mogą one powodować konflikty z przyszłymi standardowymi elementami o tej samej nazwie
  • Prawdopodobnie istnieje element HTML, który lepiej pasuje do zadania

Również; dlaczego nie wiedział, że wymyślone elementy istnieją i współpracują z CSS. Czy są rzadkie?

Tak. Ludzie nie używają ich, ponieważ mają powyższe problemy.

Quentin
źródło
30
„Nie zezwala na to specyfikacja HTML”. Niekoniecznie prawda. Nie są zgodne ze specyfikacją przestrzeni nazw HTML, ale specyfikacja HTML5 jest znacznie szerszą rzeczą, która pozwala na niestandardowe specyfikacje i wyraźnie określa, jak obsługiwać takie rzeczy w odniesieniu do obsługi CSS i API (DOM).
Ben Lesh,
4
Istnieją już biblioteki, w szczególności Angular.js, które pozwalają rozszerzać HTML o niestandardowe elementy. Być może nie w tym sensie, że masz na myśli to, że elementy są po prostu parsowane przez javascript i zwykle tłumaczone na prawdziwe, ale jeśli chcesz rozszerzyć HTML o niestandardowe tagi, możesz to zrobić za pomocą Angular
Charlie Martin
11
+1 za „Mogą one być sprzeczne z przyszłymi standardami”. Pamiętaj, że może teraz działać, ale musi zacząć działać przez 3-4 lata po rozpoczęciu.
tim.baker
70
Chciałbym mieć tag <ninja>, aby ukryć elementy domu zamiast stosowania stylu: none np .: <ninja> Niektóre ukryte rzeczy </ninja>
kiranvj
18
Kolejna naprawdę ważna kwestia: specjalne przeglądarki dla osób niewidomych lub osób z innymi ograniczonymi możliwościami używają odpowiednich elementów HTML do różnych rzeczy (na przykład ułatwiają nawigację po stronie, podążając za nagłówkami). Tak więc brakująca semantyka + domyślne renderowanie może nie wpływać zbytnio na normalne przeglądarki, ale te specjalne przeglądarki prawdopodobnie będą zdezorientowane, co drastycznie ograniczy użyteczność Twojej witryny.
Arve Systad
98

TL; DR

  • Niestandardowe tagi są nieprawidłowe w HTML. Może to prowadzić do problemów z renderowaniem.
  • Utrudnia przyszły rozwój, ponieważ kod nie jest przenośny.
  • Prawidłowy HTML oferuje wiele korzyści, takich jak SEO, szybkość i profesjonalizm.

Długa odpowiedź

Jest kilka argumentów że kod z niestandardowymi znacznikami jest bardziej użyteczny.

Prowadzi to jednak do nieprawidłowego kodu HTML. Co nie jest dobre dla Twojej witryny.

The Point of Valid CSS / HTML | Przepełnienie stosu

  • Google woli to, więc jest dobre dla SEO.
  • Zwiększa to prawdopodobieństwo, że Twoja strona internetowa będzie działać w przeglądarkach, które nie były testowane.
  • To sprawia, że ​​wyglądasz bardziej profesjonalnie (przynajmniej dla niektórych programistów)
  • Zgodne przeglądarki mogą renderować [prawidłowy HTML szybciej]
  • Wskazuje na szereg niejasnych błędów, które prawdopodobnie przegapiłeś, które wpływają na rzeczy, których prawdopodobnie nie testowałeś, np. Stronę kodową lub zestaw językowy strony.

Dlaczego sprawdzać poprawność | W3C

  • Walidacja jako narzędzie do debugowania
  • Walidacja jako przyszłościowa kontrola jakości
  • Walidacja ułatwia konserwację
  • Walidacja pomaga uczyć dobrych praktyk
  • Walidacja jest oznaką profesjonalizmu
Dan Grahn
źródło
8
Kolejnym argumentem za prawidłowym kodem jest to, że jeśli musisz przekazać innego programistę lub pracujesz w zespole, inni członkowie lub nowy programista powinni natychmiast zrozumieć, co próbujesz osiągnąć. . . Przy nieprawidłowych, wymyślonych tagach może to stać się bardzo trudne ...
Pat Dobson
9
ZNANY JAKO. Przyszły rozwój i łatwość konserwacji.
Dan Grahn
68

YADA (jeszcze jedna (inna) odpowiedź)

Edycja: Zobacz komentarz BoltClock poniżej dotyczący typu vs tag vs element. Zwykle nie martwię się o semantykę, ale jego komentarz jest bardzo odpowiedni i pouczający.

Chociaż jest już wiele dobrych odpowiedzi, wskazałeś, że twój profesor poprosił cię o opublikowanie tego pytania, aby wyglądało na to, że jesteś (formalnie) w szkole . Pomyślałem, że dokładniej wyjaśnię nie tylko CSS, ale także mechanikę przeglądarek internetowych. Według Wikipedii „CSS jest językiem arkusza stylów używanym do opisywania… dokumentu napisanego w na język znaczników”. (Dodałem nacisk na „a”) Zauważ, że nie mówi „napisany w HTML”, a tym bardziej konkretnej wersji HTML. CSS może być używany w HTML, XHTML, XML, SGML, XAML itp. Oczywiście potrzebujesz czegoś, co wyrenderujekażdy z tych typów dokumentów, który również zastosuje stylizację. Z definicji CSS nie zna / nie rozumie / nie dba o określone znaczniki języka znaczników. Tak więc tagi mogą być „nieprawidłowe”, jeśli chodzi o HTML, ale w CSS nie ma pojęcia „prawidłowego” tagu / elementu / typu.

Nowoczesne przeglądarki wizualne nie są programami monolitycznymi. Są połączeniem różnych „silników”, które mają określone zadania do wykonania. Co najmniej mogę myśleć o 3 silnikach, silniku renderującym, silniku CSS i silniku javascript / VM. Nie jestem pewien, czy analizator składni jest częścią silnika renderującego (lub odwrotnie), czy jest to osobny silnik, ale masz pomysł.

To, czy przeglądarka wizualna ( inni zajęli się już faktem, że czytniki ekranu mogą mieć inne problemy z nieprawidłowymi znacznikami ) stosuje formatowanie, zależy od tego, czy analizator składni pozostawia „niepoprawny” znacznik w dokumencie, a następnie od tego, czy silnik renderujący zastosuje style do tego tagu. Ponieważ byłoby to trudniejsze do opracowania / utrzymania, silniki CSS nie zostały napisane, aby zrozumieć, że „To jest dokument HTML, więc oto lista prawidłowych tagów / elementów / typów”. Silniki CSS po prostu znajdują znaczniki / elementy / typy, a następnie mówią silnikowi renderującemu: „Oto style, które należy zastosować”. To, czy silnik renderujący zdecyduje się na zastosowanie stylów, zależy od tego.

Oto prosty sposób myślenia o podstawach przepływie z silnika do silnika: parser -> CSS -> renderowanie. W rzeczywistości jest znacznie bardziej skomplikowany, ale wystarcza na początek.

Ta odpowiedź jest już za długa, więc na tym skończę.

Andrew Steitz
źródło
10
Chociaż wspomniałeś, że „tagi” stały się powszechnym terminem określającym elementy, z którym nie mogę się nie zgodzić, nie zmienia to faktu, że poprawnym terminem dla nich są nadal „elementy”. Znacznik jest w szczególności funkcją składniową HTML i XML i może nie istnieć w innych językach dokumentów zgodnych z CSS. Zatem powiedzenie, że style CSS „tagi”, jak ludzie często je nazywają, nie czyni wiele sprawiedliwości w stosunku do agnostycyzmu języka dokumentu CSS.
BoltClock
53

Nieznane elementy są traktowane jako divwspółczesne przeglądarki. Właśnie dlatego działają. Jest to część nadchodzącego standardu HTML5, który wprowadza modułową strukturę, do której można dodawać nowe elementy.

W starszych przeglądarkach (myślę, że IE7-) możesz zastosować sztuczkę JavaScript, po której one również będą działać.

Oto powiązane pytanie , które znalazłem, szukając przykładu.

Oto pytanie dotyczące poprawki JavaScript . Okazuje się, że to naprawdę IE7 nie obsługuje tych elementów po wyjęciu z pudełka.

Również; dlaczego nie wiedział, że wymyślone tagi istnieją i współpracują z CSS. Czy są rzadkie?

Tak, całkiem. Ale szczególnie: nie służą one dodatkowemu celowi. I są nowością w HTML5. We wcześniejszych wersjach HTML nieznany tag był nieprawidłowy.

Czasami nauczyciele mają luki w wiedzy. Może to wynikać z faktu, że muszą uczyć studentów podstaw na dany temat i naprawdę nie opłaca się znać wszystkich tajników i być na bieżąco. Kiedyś dostałem szlaban, ponieważ nauczyciel pomyślał, że zaprogramowałem wirusa, tylko dlatego, że mogłem zrobić komputer, aby odtwarzał muzykę za pomocą playpolecenia w GWBasic. (Prawdziwa historia i tak, dawno temu). Ale bez względu na powód, uważam, że rada, aby nie używać elementów klienta, jest słuszna.

GolezTrol
źródło
3
@OnoSendai Wątpiłeś, ale naprawdę myślę, że są one renderowane jako „elementy blokowe bez dodatkowych znaczników”, czyli w zasadzie div.
GolezTrol,
6
@OnoSendai Element bloku może mieć właściwość display bloku , ale nie jest wymagany. Na przykład tagi kotwicy zostały promowane do statusu bloku (co oznacza, że ​​możesz umieszczać w nich elementy blokowe, takie jak div), ale nadal mają wbudowaną właściwość display.
cimmanon,
8
Wartość początkowa displayto inline, więc komentarz @ OnoSendai jest poprawny.
BoltClock
2
@cimmanon: aelementy mają teraz przezroczysty model zawartości, więc to, czy są one blokowe czy wbudowane, zależy od tego, czy ich przodek jest blokowy czy wbudowany. Ta odpowiedź mówi o nieznanych elementach, dla których HTML nie definiuje modelu zawartości. Jeśli chodzi o CSS, jeśli nie ma domyślnej displaywartości przeglądarki , używa wartości początkowej.
BoltClock
1
@ BoltClock'saUnicorn Czy to oznacza, że ​​<div> <a> foo </a> <a> pasek </a> </div> renderuje dwa znaczniki <a> jako bloki? To wydaje się nieco podejrzane ...
puszysty
27

W rzeczywistości możesz użyć niestandardowych elementów. Oto specyfikacja W3C na ten temat:

http://w3c.github.io/webcomponents/spec/custom/

A oto samouczek wyjaśniający, jak z nich korzystać:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Jak zauważył @Quentin: jest to wstępna specyfikacja we wczesnych dniach rozwoju i nakłada ograniczenia na nazwy elementów.

Bas van Dijk
źródło
7
Należy zauważyć, że jest to szkic specyfikacji na początku projektowania i że nakłada ograniczenia na nazwy elementów.
Quentin,
2
+1 Nie wiedziałem, że używa W3C, githubale rzeczywiście używa.
Vitor Canova,
22

Jest kilka rzeczy na temat innych odpowiedzi, które są albo źle sformułowane, albo być może trochę niepoprawne.

FALSE (ish): niestandardowe elementy HTML są „niedozwolone”, „nielegalne” lub „nieprawidłowe”.

Niekoniecznie. Są „niezgodne” . Co za różnica? Coś może „nie pasować” i nadal być „dozwolone”. W3C nie wyśle ​​policji HTML do twojego domu i cię nie odciągnie.

W3C zostawił to w ten sposób z jakiegoś powodu. Zgodność i specyfikacje są określone przez społeczność. Jeśli zdarzy się, że masz mniejszą społeczność używającą HTML do bardziej konkretnych celów i wszyscy zgadzają się co do niektórych nowych elementów, które muszą im ułatwić, mogą mieć coś, co W3C nazywa „innymi stosownymi specyfikacjami” . (jest to oczywiście rażące uproszczenie, ale masz pomysł)

To powiedziawszy, ścisłe weryfikatory zadeklarują niestandardowe elementy jako „nieprawidłowe”. ale dzieje się tak, ponieważ zadaniem walidatora jest zapewnienie zgodności z dowolną specyfikacją, dla której się sprawdza, a nie zapewnienie „legalności” przeglądarki lub użytkowania .

FAŁSZ (owski): Niestandardowe elementy HTML będzie powodować problemy renderowania

Możliwe, ale mało prawdopodobne. (zamień „will” na „może”) Jedynym sposobem, w jaki powinien to spowodować problem z renderowaniem, jest konflikt elementu niestandardowego z inną specyfikacją, taką jak zmiana specyfikacji HTML lub inna specyfikacja uznawana w tym samym systemie (np. SVG, matematyka lub coś niestandardowego).

W rzeczywistości CSS może stylizować niestandardowe tagi, ponieważ specyfikacja HTML wyraźnie stwierdza, że:

Programy klienckie muszą traktować elementy i atrybuty, których nie rozumieją, jako semantycznie neutralne; pozostawiając je w DOM (dla procesorów DOM) i projektując je zgodnie z CSS (dla procesorów CSS), ale nie wywodząc z nich żadnego znaczenia

Uwaga: jeśli chcesz użyć niestandardowego tagu, pamiętaj, że zmiana specyfikacji HTML w późniejszym czasie może wysadzić twój styl, więc bądź przygotowany. <imsocool>Jednak jest bardzo mało prawdopodobne, aby W3C zaimplementował tag.

Niestandardowe tagi i JavaScript (przez DOM)

Powodem, dla którego możesz uzyskiwać dostęp i zmieniać niestandardowe elementy za pomocą JavaScript, jest to, że specyfikacja mówi nawet o tym, jak powinny być obsługiwane w DOM , który jest (naprawdę okropnym) API, który pozwala manipulować elementami na twojej stronie.

Interfejs HTMLUnknownElement musi być używany w przypadku elementów HTML, które nie są zdefiniowane w tej specyfikacji (lub innych odpowiednich specyfikacjach).

TL; DR: Zgodność ze specyfikacją odbywa się w celu komunikacji i bezpieczeństwa. Niezgodność jest nadal dozwolona przez wszystko oprócz walidatora , którego jedynym celem jest wymuszanie zgodności, ale którego użycie jest opcjonalne.

Na przykład:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Jestem pewien, że to przyciągnie płomienie, ale są moje 2 centy)

Ben Lesh
źródło
3
HTML nie tylko określa, w jaki sposób elementy powinny być traktowane w CSS, ale specyfikacja CSS jest również w większości zależna od języka od projektu (jest to już trochę sugerowane w niektórych innych odpowiedziach, ale zauważam to tutaj dla wygoda). Jeśli jest każde zachowanie, które jest specyficzne dla HTML i / lub XHTML, zawsze jest wskazane , nawet w tekście informacyjnym (np „elementu HTML za identyfikator jest określony przez idatrybut”), a nie tylko tekst normatywny (patrz tła i obramowania 3 dla przykład).
BoltClock
18

Zgodnie ze specyfikacją:

CSS

Selektor typu jest nazwą typu dokument napisany przy użyciu języka elementu składni CSS kwalifikowanych nazw

Myślałem, że to się nazywa selektor elementów , ale najwyraźniej tak naprawdę jest to selektor typów . Specyfikacja mówi dalej o tym, CSS qualified namesktóre nie ograniczają rzeczywistych nazw. To znaczy, że dopóki selektor typu pasuje do składni nazwy kwalifikowanej CSS, jest to technicznie poprawny CSS i będzie pasował do elementu w dokumencie. Nie ma specyficznego dla CSS ograniczenia dla elementów, które nie istnieją w konkretnej specyfikacji - HTML lub w inny sposób.

HTML

Nie ma oficjalnych ograniczeń dotyczących umieszczania jakichkolwiek znaczników w żądanym dokumencie. Jednak dokumentacja mówi

Autorzy nie mogą używać elementów, atrybutów ani wartości atrybutów do celów innych niż ich odpowiedni zamierzony cel semantyczny, ponieważ uniemożliwia to prawidłowe przetwarzanie strony przez oprogramowanie.

I później mówi

Autorzy nie mogą używać elementów, atrybutów lub wartości atrybutów, które są niedozwolone w niniejszej specyfikacji lub innych mających zastosowanie specyfikacjach, ponieważ czyni to znacznie trudniejszym do rozszerzenia języka w przyszłości.

Nie jestem pewien, gdzie dokładnie lub jeśli specyfikacja mówi, że elementy nieznane są dozwolone , ale mówi o interfejsie HTMLUnknownElement dla nierozpoznanych elementów. Niektóre przeglądarki mogą nawet nie rozpoznawać elementów, które są w obecnej specyfikacji (przychodzi na myśl IE8).

Istnieje jednak szkic dla niestandardowych elementów , ale wątpię, aby został wdrożony gdziekolwiek.

Pigułki przeciwwybuchowe
źródło
Myślę, że większość z nas uważa je za selektory elementów , ale ma sens, że są to selektory typu „oficjalnie” .
Andrew Steitz,
@Andrew Steitz: Pomyśl o tym w ten sposób: element: type :: person: name. Możesz mieć wiele elementów różnych typów, przy czym każdy element jest jednego typu, i w ten sam sposób możesz mieć wiele osób, z których każdy ma nazwę. Selektory działają na drzewie dokumentów, a każdy selektor może pasować do pewnej liczby elementów drzewa dokumentu, które można zawęzić za pomocą selektora klasy, selektora identyfikatora, selektora atrybutu ... lub selektora typu. Cokolwiek użyjesz, nadal dopasowujesz elementy. Zatem „selektor elementów” nie miałby w tym przypadku sensu - wszystkie te rzeczy byłyby selektorami elementów.
BoltClock
@ BoltClock'saUnicorn: Prawda, ale klasa, identyfikator i atrybut to wszystkie, uh, atrybuty (LOL) „elementu”, tj. „Rzecz” w nawiasach kątowych. Opisują „element”, w którym znajdują się znaczniki otwierające. Tak, <a> i <div> są specyficznymi „typami” elementów, ale wątpię, czy ktokolwiek nazwałby klasę, identyfikator i atrybuty „elementami”. CAŁKOWICIE zgadzam się, że wszystkie selektory są tak naprawdę selektorami „elementowymi”, ale we WSPÓLNYM UŻYCIU ludzie zwykle określają selektory „typu” jako selektory „elementowe”. To był sens mojego poprzedniego komentarza. Przepraszam, to było niejasne. :-)
Andrew Steitz
@ExplosionPills - specyfikacje HTML nie mówią, że nieznane elementy są niedozwolone, ale ponieważ każdy element ma wyliczoną listę nazw elementów, które są dozwolone jako jego elementy potomne (tzn. Jego model zawartości), nie musi tego robić. Po prostu nigdzie nie jest dozwolony nieznany element jako element potomny dozwolonego elementu. Zastosowanie HTMLUnknownElement do takich elementów jest częścią poprzedniej specyfikacji - tj. Co konsumenci HTML muszą robić z dokumentami ważnymi lub nie - i nie jest częścią tego, co autorzy muszą zrobić, aby ich dokumenty były ważne.
Alohci,
@Alohci Mam na myśli niedozwolone w tym sensie, że zostaną odrzucone z DOM, a nie semantycznie nieważne
pigułki przeciwwybuchowe
13

Jest to możliwe w przypadku HTML5, ale musisz wziąć pod uwagę starsze przeglądarki.

Jeśli zdecydujesz się ich użyć, pamiętaj, aby KOMENTARZOWAĆ swój plik HTML !! Niektórzy ludzie mogą mieć problemy z ustaleniem, co to jest, więc komentarz może zaoszczędzić mnóstwo czasu.

Coś takiego,

<!-- Custom tags in use, refer to their CSS for aid -->

Kiedy utworzysz własny tag / elementy, starsze przeglądarki nie będą miały pojęcia, co to jest tak jak elementy HTML5 takie jak nav/ section.

Jeśli jesteś zainteresowany tą koncepcją, polecam zrobić to we właściwy sposób.

Pierwsze kroki

Elementy niestandardowe pozwalają twórcom stron internetowych definiować nowe typy elementów HTML. Specyfikacja jest jednym z kilku nowych prymitywów API lądujących pod parasolem Web Components, ale prawdopodobnie jest najważniejsza. Składniki sieciowe nie istnieją bez funkcji odblokowanych przez elementy niestandardowe:

Zdefiniuj nowe elementy HTML / DOM Twórz elementy, które rozciągają się na inne elementy Logicznie łącz niestandardową funkcjonalność w jeden tag Rozszerz interfejs API istniejących elementów DOM

Jest wiele rzeczy, które możesz z tym zrobić i sprawia, że ​​twój skrypt jest piękny, ponieważ ten artykuł lubi to ujmować. Elementy niestandardowe definiujące nowe elementy w HTML .

Podsumujmy,

Plusy

  • Bardzo elegancki i łatwy do odczytania.

  • Miło jest nie widzieć tak wielu divs. : p

  • Pozwala na unikalne wyczucie kodu

Cons

  • Starszą obsługę przeglądarki należy rozważyć.

  • Inni programiści mogą nie mieć pojęcia, co zrobić, jeśli nie wiedzą o niestandardowych tagach. (Wyjaśnij im lub dodaj komentarze, aby je poinformować)

  • Wreszcie jedną rzeczą, którą należy wziąć pod uwagę, ale nie jestem pewien, są elementy blokowe i wbudowane. Używając tagów niestandardowych, będziesz kończył pisać więcej css, ponieważ tag niestandardowy nie będzie miał domyślnej strony.

Wybór należy wyłącznie do Ciebie i powinieneś oprzeć go na tym, o co prosi projekt.

Aktualizacja 1/2/2014

Oto bardzo pomocny artykuł, który znalazłem i pomyślałem, że podzielę się, Elementy niestandardowe .

Poznaj technologię Dlaczego elementy niestandardowe? Elementy niestandardowe pozwalają autorom definiować własne elementy. Autorzy kojarzą kod JavaScript z niestandardowymi nazwami znaczników, a następnie używają tych niestandardowych nazw znaczników, tak jak zwykłych znaczników.

Na przykład po zarejestrowaniu specjalnego rodzaju przycisku o nazwie superprzycisk użyj takiego przycisku:

Elementy niestandardowe są nadal elementami. Możemy tworzyć, wykorzystywać, manipulować i komponować je tak łatwo, jak każdy standard lub obecnie.

Wydaje się, że jest to bardzo dobra biblioteka do użycia, ale zauważyłem, że nie przeszła w stan kompilacji Windows. Wydaje mi się, że jest to również pre-alfa, więc będę miał na to oko, dopóki się nie rozwinie.

Josh Powell
źródło
3
Other developers may have no clue what to do if they don't know about custom tags.” Nienawidzę tego argumentu. Inni programiści powinni także uczyć się nowych rzeczy, a jeśli nie rozumieją technik używanych w kodzie, powinni być ci wdzięczni za wskazanie niedociągnięć w ich wiedzy. Może w tym przypadku jest to trochę niesprawiedliwe, ponieważ tagi niestandardowe istnieją tylko jako wersja robocza, ale słyszałem ten sam argument przy użyciu odpowiednich standardowych technik.
GolezTrol,
1
Nie twierdzę, że to popieram, ale wielu programistów nie uczy się dalej. Nie ma prawie żadnego powodu, aby nie komentować czegoś, jeśli jest to trochę skomplikowane lub nowe. Wszyscy komentujemy nasze skrypty, prawda? Aby pokazać, co wykonujemy i jak, podobnie jak w przypadku niestandardowych tagów.
Josh Powell,
1
Oczywiście, jeśli chodzi tylko o dodawanie komentarzy. Myślałem, że masz na myśli, że nie powinieneś w ogóle używać niestandardowych elementów, ponieważ inni ludzie nie zrozumieliby. Dobrze jest dodać mały komentarz po dodaniu rzadziej stosowanej techniki. Uważaj jednak na komentarze w HTML. Mogą skończyć na kliencie, zużywając przepustowość i ewentualnie ujawniając szczegóły implementacji, o których nie chcesz, aby odwiedzający się dowiedzieli. Alternatywnie możesz dodawać komentarze jako komentarze PHP / ASP, więc są one nadal w szablonie, ale pozostają na serwerze.
GolezTrol,
1
@GolezTroi, nie jest tak, że nigdy nie powinieneś robić rzeczy, które stanowią wyzwanie dla innych programistów, to kwestia kosztów i korzyści. Jeśli robienie czegoś w sposób, który jest trudniejszy dla następnego programisty, poprawia kod i czyni go czystszym, zrób to. Ale nie rób cholernych rzeczy dla zabawy.
BostonJoh
1
@JoshPowell Komentarze nie powinny dotyczyć tego, co i jak (kod już to mówi, a jeśli nie jest wystarczająco jasne, przepisz kod, dopóki nie będzie), ale powinny mi powiedzieć, dlaczego . Jest kilka rzeczy gorszych niż mnóstwo komentarzy, które mówią tylko, że sendmailfunkcja wysyła pocztę lub coś w tym rodzaju. Byłbym bardziej zainteresowany tym, dlaczego wysyłasz pocztę - i jeśli nazwa funkcji czyni to oczywistym, świetnie! Zatem nie potrzebuję komentarza, co jest idealnym przypadkiem. I tak przeczytam kod.
Christopher Creutzig
4

Dlaczego nie chce, żebyś ich używał? Nie są one powszechne ani nie są częścią standardu HTML5. Technicznie nie są dozwolone. Są włamaniem.

Ale ja sam je lubię. Możesz być zainteresowany XHTML5. Pozwala definiować własne tagi i wykorzystywać je jako część standardu.

Ponadto, jak zauważyli inni, są one nieprawidłowe i dlatego nie są przenośne.

Dlaczego nie wiedział, że one istnieją? Nie wiem, poza tym, że nie są one powszechne. Być może po prostu nie był świadomy, że możesz.

tjons
źródło
2
Nie ma XHTML5 - istniała grupa robocza, która próbowała wprowadzić XHTML 2, ale wiele lat temu.
maks.
1
@papirtiger: XHTML5 to HTML5 obsługiwany jak XML, ale masz rację, że nie ma niezależnego standardu XHTML poza XHTML 1.1.
BoltClock
1
Więc nie jest XHTML5, ale wydaje się, że różnią się prawie od HTML5 dotyczące tego tematu niestandardowych znaczników. Dlatego uważam, że stwierdzenie o XHTML5 pozwalające na zdefiniowanie dodatkowych tagów w przeciwieństwie do HTML5 jest błędne, co może wyjaśniać głosowanie negatywne, nawet jeśli nie jestem pewien co do XHTML5, aby głosować lub głosować tę odpowiedź.
GolezTrol,
1
Zgodnie z wersją roboczą HTML5 W3C, HTML i XHTML są (obecnie) „konkretnymi składniami” reprezentującymi ten sam „język abstrakcyjny”. Mają te same podstawowe funkcje, z wyjątkiem tych, które mają sens tylko w jednej składni (przestrzenie nazw XML, przełącznik parsera noscript HTML): w3.org/TR/html5/introduction.html#html-vs-xhtml
IMSoP
2

Gotowe tagi są rzadko używane, ponieważ jest mało prawdopodobne, aby działały niezawodnie w każdej bieżącej przeglądarce i każdej przyszłej przeglądarce.

Przeglądarka musi przetworzyć kod HTML na znane mu elementy, aby utworzone tagi zostały przekonwertowane na coś innego, aby zmieściły się w modelu obiektowym dokumentu (DOM). Ponieważ standardy sieciowe nie obejmują sposobu obsługi wszystkiego, co jest poza standardami, przeglądarki internetowe zwykle obsługują niestandardowy kod na różne sposoby.

Tworzenie stron internetowych jest dość trudne z wieloma różnymi przeglądarkami, które mają własne dziwactwa, bez dodawania kolejnego elementu niepewności. Najlepiej jest trzymać się rzeczy, które są rzeczywiście w standardach, czyli takich, które starają się podążać dostawcy przeglądarek, aby mieć najlepszą szansę na faktyczne działanie.

Guffa
źródło
2

Myślę, że gotowe tagi są potencjalnie bardziej mylące lub niejasne niż p z identyfikatorami (ogólnie jakiś blok tekstu). Wszyscy wiemy, że ap z identyfikatorem to akapit, ale kto wie, do czego przeznaczone są zrobione tagi? Przynajmniej taka jest moja myśl. :) Dlatego jest to bardziej kwestia stylu / przejrzystości niż funkcjonalności.

runelynx
źródło
3
Dziękuję gramatyczna wróżka :)
runelynx
2

Inni poczynili doskonałe punkty, ale warto zauważyć, że jeśli spojrzysz na framework, taki jak AngularJS , istnieje bardzo uzasadniona sprawa dla niestandardowych elementów i atrybutów. Przekazują one nie tylko lepsze znaczenie semantyczne xml, ale mogą także zapewnić zachowanie, wygląd i działanie strony internetowej.

drew_w
źródło
2

CSS jest językiem arkuszy stylów, którego można używać do prezentacji dokumentów XML, nie tylko dokumentów (X) HTML. Twój fragment z gotowymi tagami może być częścią legalnego dokumentu XML; byłby to jeden, gdybyś zamknął go w jednym elemencie głównym. Prawdopodobnie już go masz <html> ...</html>? Każda bieżąca przeglądarka może wyświetlać dokumenty XML.

Oczywiście nie jest to bardzo dobry dokument XML, brakuje w nim gramatyki i deklaracji XML. Jeśli zamiast tego użyjesz nagłówka deklaracji HTML (i prawdopodobnie konfiguracji serwera, która wysyła prawidłowy typ MIME), byłoby to nielegalne HTML.

(X) HTML ma zalety w stosunku do zwykłego XML, ponieważ elementy mają znaczenie semantyczne, które jest przydatne w kontekście prezentacji strony internetowej. Narzędzia mogą pracować z tą semantyką, inni programiści znają znaczenie, jest mniej podatny na błędy i lepiej go czytać.

Ale w innych kontekstach lepiej jest użyć CSS z XML i / lub XSLT do przeprowadzenia prezentacji. To właśnie zrobiłeś. Ponieważ nie było to twoje zadanie, nie wiedziałeś, co robisz, a HTML / CSS jest lepszym sposobem, aby przejść przez większość czasu, w którym powinieneś trzymać się tego w swoim scenariuszu.

Należy dodać nagłówek (X) HTML do dokumentu, aby narzędzia mogły wyświetlać sensowne komunikaty o błędach.

Hauke ​​Ingmar Schmidt
źródło
2
Nie, to wcale nie jest legalny (dobrze sformatowany) XML. Jest <style>element, a następnie ... <body>element. Dokument XML musi mieć tylko jeden element główny; w tym przypadku albo <style>element jest elementem głównym, ale <body>przeszkadza, lub element główny musi zostać dodany, aby oba elementy były jego elementami potomnymi. Chyba że zastąpisz <style>element odwołaniem do arkusza stylów (nawet identyfikator URI danych <?xml-stylesheet href="data:text/css,imsocool { color: blue; }"?>będzie działał dobrze) tak, że element główny stanie się <body>.
BoltClock
2

... Po prostu zmieniam wszystkie moje utworzone tagi na akapity z identyfikatorami.

Właściwie mam problem z jego sugestią, jak zrobić to właściwie.

  1. <p>Znacznik dla ust. Widzę, że ludzie używają go cały czas zamiast div - po prostu do celów związanych z odstępami lub dlatego, że wydaje się łagodniejszy. Jeśli to nie jest akapit, nie używaj go.

  2. Nie musisz lub nie chcesz umieszczać identyfikatorów na wszystkim, chyba że musisz celować w to konkretnie (np. Za pomocą Javascript). Używaj klas lub po prostu div div.

dennisbest
źródło
2

Od samego początku CSS był zaprojektowany tak, aby był niezależny od znaczników, dzięki czemu można go używać z dowolnym językiem znaczników tworzącym podobne do drzew struktury DOM (na przykład SVG). Każdy tag zgodny z name tokenprodukcją jest całkowicie poprawny w CSS. Twoje pytanie dotyczy raczej HTML niż samego CSS.

Elementy z niestandardowymi tagami są obsługiwane przez specyfikację HTML5. HTML5 ustandaryzuje sposób analizowania nieznanych elementów w DOM. Tak więc HTML5 jest pierwszą specyfikacją HTML, która umożliwia ściśle mówiąc elementy niestandardowe. Wystarczy użyć dokumentu HTML5 <!DOCTYPE html>w swoim dokumencie.

Od samych nazw niestandardowych tagów ...

W tym dokumencie http://www.w3.org/TR/custom-elements/ zaleca się, aby niestandardowe tagi zawierały co najmniej jeden symbol „-” (myślnik). W ten sposób nie będą konfliktować z przyszłymi elementami HTML. Dlatego lepiej zmień dokument na coś takiego:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 
c-uśmiech
źródło
2

Najwyraźniej nikt o tym nie wspominał, więc to zrobię.

Jest to produkt uboczny wojen przeglądarkowych .

W latach 90., kiedy Internet po raz pierwszy pojawił się w głównym nurcie, wzrosła konkurencja na rynku przeglądarek. Aby pozostać konkurencyjnym i przyciągnąć użytkowników, niektóre przeglądarki (zwłaszcza Internet Explorer) starały się być pomocne i „przyjazne dla użytkownika”, próbując dowiedzieć się, co oznaczają projektanci stron , i w ten sposób dopuścić nieprawidłowe znaczniki (np. <b><i>foobar</b></i>Poprawnie wyświetlałyby się jako pogrubione - kursywa).

Ma to do pewnego stopnia sens, ponieważ jeśli jedna przeglądarka narzeka na błędy składniowe, podczas gdy inna zjada cokolwiek, co rzuciłeś na nią i wyrzuca (mniej lub bardziej) poprawny wynik, wtedy ludzie naturalnie uciekną do tego drugiego.

Podczas gdy wielu uważało, że wojny przeglądarek się zakończyły, w ostatnich latach od premiery Chrome ponownie wybuchła nowa wojna między producentami przeglądarek, Apple znów zaczęło rosnąć i wypychać Safari, a IE straciło swoją dominację. (Można to nazwać „zimną wojną” ze względu na postrzeganą współpracę i wsparcie standardów przez producentów przeglądarek). Dlatego nie jest zaskoczeniem, że nawet współczesne przeglądarki, które podobno ściśle odpowiadają standardom internetowym, faktycznie starają się być „sprytne” i zezwalaj na łamanie standardów, takie jak to, aby spróbować uzyskać przewagę jak wcześniej.

Niestety, to pobłażliwe zachowanie doprowadziło do ogromnego ( niektórzy mogliby nawet powiedzieć, że nowotworowego) wzrostu źle oznakowanych stron internetowych. Ponieważ IE była najbardziej pobłażliwą i popularną przeglądarką, a także z powodu ciągłego lekceważenia standardów przez Microsoft, IE stało się niesławne za zachęcanie i promowanie złego projektu oraz propagowanie i utrwalanie uszkodzonych stron.

Być może na razie możesz uniknąć używania dziwactw i exploitów w niektórych przeglądarkach, ale poza okazjonalnymi łamigłówkami, grą lub czymś takim, zawsze powinieneś trzymać się standardów internetowych podczas tworzenia stron internetowych i witryn, aby zapewnić ich prawidłowe wyświetlanie i unikaj ich uszkodzenia (ewentualnie całkowitego zignorowania) dzięki aktualizacji przeglądarki.

Synetech
źródło
Twierdziłbym, że obwinianie tego konkretnego dziwactwa na IE jest trochę nie na bazie, ponieważ kiedy oficjalnie dodano kilka nowych tagów (dla HTML5), IE była jedyną dużą przeglądarką, która wymagała określonego „podkładki”, aby można je było nadawać się do stylizacji . Częściowo było to spowodowane bardziej agresywnymi reżimami aktualizacji innych przeglądarek (co oznacza, że ​​starsze wersje IE działają dłużej niż stare wersje Chrome Firefox), ale jest zupełnie odwrotnie niż IE „najbardziej łagodny”.
IMSoP,
HTML5? Co? <imsocool>nie jest nowym tagiem w HTML5. Nie ma to nic wspólnego z HTML5 lub IE 8, 9 itd. Tego rodzaju zachowanie nie jest nowym dziwactwem; jest produktem ubocznym wieloletnich wojen przeglądarkowych. Nawet jeśli IE nie ponosi odpowiedzialności za bieżące standardowe przestępstwa (choć ku zdziwieniu twórców stron internetowych nadal odmawiają odpowiedniego dostosowania), z pewnością były znane z propagowania złych praktyk kodowania przez lata. Mówiąc dokładniej, najłagodniejsze przeglądarki (IE to najgorszy przestępca) pojawiły się w najgorszym momencie, kiedy Internet zaczął się rozpoczynać, a twórcy stron internetowych zaczęli uczyć się HTML… niepoprawnie.
Synetech
Nie powiedziałem, że ma to coś wspólnego z HTML5, ale ma to związek z niestandardowymi tagami (jak np. Do <header>momentu, gdy HTML5 stał się celem standardowym), których stare wersje IE z pewnością nie są „tolerancyjne”. Łagodzenie nie jest również tym samym co niezgodność - HTML5 jest niezwykle pragmatycznym standardem, który przyjmuje, że źle sformułowany HTML będzie istniał, w przeciwieństwie do idealizmu z wcześniejszych specyfikacji W3C, a ta „łagodność” prawdopodobnie sprzyja demokratycznemu rozwojowi sieci.
IMSoP,
Ponownie nie mówię o żadnej konkretnej przeglądarce lub wersji. Wyjaśniam, że łagodność ogólnie jest efektem ubocznym wojen przeglądarkowych. IE tolerowało wiele niestandardowych, a nawet całkowicie zepsutych zachowań, takich jak brakujące tagi, nieprawidłowe tagi i atrybuty oraz źle dopasowane tagi ( <b><i>foobar</b></i>). To nie jest tajemnica, a nawet dobrze krytykowana i bardzo złośliwa kwestia. Jak powiedziałem, IE nie była jedyną przeglądarką, która pozwalała na złe znaczniki, ale ponieważ miała tak duży udział w rynku i pojawiła się we właściwym (lub niewłaściwym) czasie, przyczyniła się w dużej mierze do złego znaczników w ogóle .
Synetech,
1

Chociaż przeglądarki zazwyczaj będą odnosić CSS do tagów HTML bez względu na to, czy są poprawne, absolutnie NIE należy tego robić.

Z technicznego punktu widzenia nie ma w tym nic złego. Używanie gotowych tagów jest jednak czymś, czego NIGDY nie powinieneś robić w HTML.

HTML to język znaczników, co oznacza, że ​​każdy znacznik odpowiada określonemu typowi informacji.

Twoje wymyślone tagi nie odpowiadają żadnemu rodzajowi informacji. Spowoduje to problemy z robotami indeksującymi, takimi jak Google.

Przeczytaj więcej informacji na temat znaczenia prawidłowego oznaczania .

Edytować

Dywizje odnoszą się do grup wielu powiązanych elementów, które mają być wyświetlane w formie bloków i można nimi manipulować jako takie.

Rozpiętości odnoszą się do elementów, które mają być stylizowane inaczej niż kontekst, w którym się obecnie znajdują i mają być wyświetlane w linii, a nie jako blok. Przykładem może być to, że kilka słów w zdaniu musi składać się z wielkich liter.

Niestandardowe tagi nie korelują z żadnymi standardami, dlatego zamiast nich należy używać span / div z właściwościami class / ID.

Istnieją bardzo szczególne wyjątki, takie jak Angular JS

Dan Green-Leipciger
źródło
3
„Nigdy” nigdy nie jest właściwą odpowiedzią - wydaje się, że zapomniałeś o XHTML;)
Izkata,
div i span również nie odpowiadają żadnym rodzajom informacji. Wygląda na to, że Google i czytniki ekranu dobrze sobie z tym radzą. Ważne jest stosowanie znaczników semantycznych, ale wcale nie jest to argumentem przeciwko używaniu niestandardowych znaczników.
GolezTrol,
2
Dywizje odnoszą się do grup wielu powiązanych elementów, które mają być wyświetlane w formie bloku i jako takie można nimi manipulować. Rozpiętości odnoszą się do elementów, które mają być podobnie stylowane i mają być wyświetlane w linii, a nie jako blok. Niestandardowe tagi nie korelują z żadnymi standardami, dlatego zamiast nich należy używać span / div z właściwościami class / ID.
Dan Green-Leipciger,
Usunąłem twój fragment dotyczący czytników ekranu, ponieważ jest niepoprawny. Technologia wspomagająca będzie <imsocool>some awesome text</imsocool>dobrze czytać, ponieważ będzie interpretowana jako <>...</>. Co się nie stanie, nie będą mogli przeskoczyć do tego fragmentu tekstu niezależnie, jakby to był <p>. Oczywiście, jeśli napisałeś własny DOCTYPE i zmapowałeś imsocoolgo p, to zadziałałoby.
Ryan B,
0

Chociaż CSS ma funkcję zwaną „selektorem znaczników”, tak naprawdę nie wie, co to jest znacznik. Pozostaje do zdefiniowania język dokumentu. CSS został zaprojektowany do użycia nie tylko z HTML, ale także z XML, gdzie (zakładając, że nie korzystasz z DTD lub innego schematu sprawdzania poprawności) tagi mogą być praktycznie czymkolwiek. Możesz używać go również w innych językach, chociaż musisz wymyślić własną semantykę, aby dokładnie określić, co odpowiadają „znacznikom” i „atrybutom”.

Przeglądarki zazwyczaj stosują CSS do nieznanych tagów w HTML, ponieważ uważa się to za lepsze niż całkowite zerwanie: przynajmniej mogą coś wyświetlić. Ale bardzo złą praktyką jest celowe używanie „fałszywych” tagów. Jednym z powodów jest to, że od czasu do czasu definiowane są nowe tagi, a jeśli taki jest zdefiniowany, wygląda trochę jak fałszywy tag, ale nie działa w ten sam sposób, co może powodować problemy z witryną w nowych przeglądarkach.

The Spooniest
źródło
0

Dlaczego CSS działa z fałszywymi elementami? Ponieważ nikomu nie zaszkodzi, ponieważ i tak nie powinieneś ich używać.

Dlaczego mój profesor nie chce, abym używał gotowych elementów?Ponieważ jeśli ten element zostanie zdefiniowany w specyfikacji w przyszłości, będzie on miał nieprzewidywalne zachowanie.

Ponadto, dlaczego nie wiedział, że wymyślone elementy istnieją i współpracują z CSS. Czy są rzadkie? Ponieważ on, podobnie jak większość innych twórców stron internetowych, rozumie, że nie powinniśmy używać rzeczy, które mogłyby się zepsuć losowo w przyszłości.

ADJenks
źródło