Dlaczego CSS działa z fałszywymi elementami?

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?

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.

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

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ę.

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.

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.

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)

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.

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.

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.

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.

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.

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.

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.

... 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.

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> 

^{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.

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

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.

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.