Post hier je meest bizarre CSS fantasieën

[Verwijderd]

Okay, sinds kort bevat het forum ook syntax highlighting support voor CSS

Goed, hij is gebaseerd om de CSS 2.1 sppecificatie, en er is een vrij goede kans dat er nog wat onvolkomenheden inzitten. Hij herkent in principe alle properties en een aantal bekende waarden.

Genoeg geluld, hieronder post in een stukje van het testbestand dat ik heb gebruikt. Of het hele zinvolle CSS is maakt niet zo heel veel uit, het gaat om de syntax.
Hier zitten de CSS goeroe's, en dat zullen we laten weten ook! Laten we eens kijken of we de highlighter op zijn knieën kunnen krijgen.

Cascading Stylesheet:

/* GENERAL */

html {
    color: #fff;
    background-color: #c6c1b4;
}
body {
    position: relative;
    margin: 0;
    padding: 0;
}
body, td, th, input, textarea {
    font: normal 13px arial, helvetica, sans-serif;
    color: #000;
}
input, select, textarea {
    background-color: #fff;
}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #c00042;
    text-decoration: underline;
}
a img {
    border: 0 solid;
}
p {
    margin: 13px 0;
}

@charset "iso-8859-1";

html {
   color: #4D483C;
   background-color: #F8F8F8;
   font-size: 75%;
   font-family: verdana, arial, sans-serif;
   line-height: 150%;
}

body {
   width: 760px;
   margin: 0 auto;
   padding: 0;
}

@import url(piet.css) {
}

/* -------------------------------- */

h1,
h2 {
   font-family: georgia, palatino linotype, serif;
   font-weight: normal;
}

h1 {
   color: #336699;
   background-color: inherit !important;
   font-size: 190%;
   line-height: 110%;
}

h2 {
   color: #999966;
   background-color: inherit;
   font-size: 145%;
}

p {
   margin-top: 0;
}

/* -------------------------------- */

a:link,
a:visited {
   color: #003366;
   background-color: inherit;
   text-decoration: none;
}

a:hover,
a:active {
   text-decoration: underline;
}

/* -------------------------------- */

#content {
   margin: 0;
   padding: 0 15px;
   border-width: 1px;
   border-style: solid;
   border-color: #CCCCCC;
   color: #4D483C;
   background-color: #FFFFFF;
 }


/* -------------------------------- */

.nav {
   margin: 2px 15px;
   text-align: right;
}

.nav ul {
   margin: 0;
   padding: 0;
}

.nav ul li {
   display: inline;
   margin: 0 .4ms 0 0;
   padding: 0;
   list-style-type: none;
   background-image: url("ieps.css");
}

.nav ul li.bypass {
   left: 0;
   display: none;
   background-color: ThreeDFace;
}


/* ------------
.nav ul li.bypass {
   display: none;
}
-------------------- */

em { color: rgb(255,0,0) } 

samp {
   font-family: verdana, arial, sans-serif;
   text-transform: lowercase;
}

[Rowanov]

Je had nog niet zo'n notatie geloof ik:

Cascading Stylesheet:

div>a:hover {
    color: #fff; 
}

[Rickets]

Cascading Stylesheet:

p[example="public class melp\
{\
    private int x;\
\
    melp(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

[ Voor 22% gewijzigd door Rickets op 06-12-2004 22:54 ]

[Woudloper]

* Woudloper vindt de tantek boxmodel hack altijd er bizar. Ook maar even laten zien:

Cascading Stylesheet:

div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
} 

Ook bestaat er nog de volgende Box Model Hack:

Cascading Stylesheet:

  div.content {  width: 300px; } /* for browsers with no escapes at all */
  div.content { \width: 400px; } /* for IE5/Win */
  div.content { w\idth: 300px; } /* for good browsers */

Of deze:

Cascading Stylesheet:

  background-color: blue;
  /*/*//*/ layer-background-color: blue; /* */

Ook heb je nog de volgende import hack:

Cascading Stylesheet:

  @import "null?\"\{"; 
  @import "highpass.css";

Maar ja, deze zijn allemaal te standaard en krijge nde CSS highlighter niet op z'n knieën...

[Verwijderd]

Cascading Stylesheet:

E[lang|="en"] {}
E[foo~="warning"]()
E:target {
/* is wel css 3, magoe */
}
E:lang(c){}

font.rood { /* :P */
font: caption;
font: message-box;
}

q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(no) { quotes: "«" "»" '"' '"' }

q:before { content: open-quote }
q:after  { content: close-quote }

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item;
content: attr(class);
content: '\2014  '; }

ey: waarom is url() rood en counter() en rgb() blauw?

Cascading Stylesheet:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

/* what about gewoon zooi: (moet genegeerd worden) */
@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  h1 { color: red }
}
h1 { color: blue }

[ Voor 224% gewijzigd door Verwijderd op 06-12-2004 23:42 ]

[Verwijderd]

ey, kunnen trouwens niet bestaande keywords rood onderstreept worden ofzo?
bij voorbeeld

Cascading Stylesheet:

foep.friemel {
  display: nothing;
  float: aside;
  melp: left;
}

dat je nothing, aside en melp onderstreept (en eventueel foep ook).

worden css topics dalijk opgelost doordat de TS z'n bugs meteen ziet

[Woudloper]

Verwijderd schreef op vrijdag 10 december 2004 @ 14:44:
ey, kunnen trouwens niet bestaande keywords rood onderstreept worden ofzo?

* snip (voorbeeld) *

dat je nothing, aside en melp onderstreept (en eventueel foep ook).

worden css topics dalijk opgelost doordat de TS z'n bugs meteen ziet

Ik geloof dat de Syntax Highlighter dat wel aan kan, kijk maar eens bij de maker van de Highlighter op zijn site...

[Verwijderd]

* Anne vraagt zich af of @charset wel midden in het document mag

Cascading Stylesheet:

@media "screen"{
 html[foo=ba]:after{
  content:"Nee!";
 }
}

[Verwijderd]

Cascading Stylesheet:

html{
 background:invalid;
}

Cascading Stylesheet:

html:-foo-invalid{
 invalid:bar;
}

Netjes!

[Verwijderd]

worden css topics dalijk opgelost doordat de TS z'n bugs meteen ziet

Hmm, goed idee:

Cascading Stylesheet:

html:after{
 height:30;
 width:50koeien;
}

[Woudloper]

Betreffende dat gelijk oplossen van de bugs kan je het volgende artikel lezen: .oisyn.nl | Code syntax highlighter (php module).

Daar kan je ook de source downloaden en wellicht ermee spelen. Verder kan je nog in het volgende topic kijken:

[rml][ disc] code highlight kleuren[/rml]

[Verwijderd]

Verwijderd schreef op vrijdag 10 december 2004 @ 14:44:
ey, kunnen trouwens niet bestaande keywords rood onderstreept worden ofzo?
bij voorbeeld

Cascading Stylesheet:

foep.friemel {
  display: nothing;
  float: aside;
  melp: left;
}

dat je nothing, aside en melp onderstreept (en eventueel foep ook).

worden css topics dalijk opgelost doordat de TS z'n bugs meteen ziet

als je css/xml gebruikt dan is foep gewoon goed dus die kan je niet met rood gaan onderstrepen.

[Verwijderd]

ja, daarom zette ik er ook "eventueel" bij. Misschien groen onder-dashen ofzo

[Verwijderd]

ja of oranje,
soort stoplicht highlighting

en dan dus ook waardes zonder eenheid onderstrepen enzo

[ Voor 4% gewijzigd door Verwijderd op 10-12-2004 16:44 ]

[Clay]

Cascading Stylesheet:

a[hreflang]:after {
   background:black url("lorem.gif") left center no-repeat;
   content:" " attr(hreflang);
   font-size:9px;
}

*|*:not([rel]):nth-child(2n+1) ~ b {
   color:#204080 !important;
}

wat meer 3 dan 2 maar gaat toch redeliijk eigenlijk

[ Voor 38% gewijzigd door Clay op 10-12-2004 16:58 ]

[Blaise]

en dan dus ook waardes zonder eenheid onderstrepen enzo

Lijkt mij ook handig om dat te markeren. Maar niet bij 0 natuurlijk.

En ik zie bestaande HTML-elementen liever in een andere kleur dan zwart.

[crisp]

Vergeet niet dat het niet de bedoeling is allerlei extra functionaliteit aan de highlighter te gaan toevoegen. De highlighter heeft uiteindelijk maar een beperkt aantal mogelijkheden tot stylen, hetgeen tot uiting komt in de toegepaste classes:

Cascading Stylesheet:

.code_keyword       { color: #080; }
.code_special       { color: #d0d; }
.code_ident     { color: #00b; }
.code_number        { color: #00f; }
.code_method        { color: #008; font-weight: bold; line-height: 100%; }
.code_string        { color: #d00; }
.code_comment       { color: #808; }
.code_preproc       { color: #008; }
.code_error_line    { color: #f00; text-decoration: underline; }
.code_error     { color: #000; text-decoration: none; }

meer smaken zijn er gewoonweg niet...

[BtM909]

Wie had gedacht dat CSS <!-- highlighting --> support er eerder zou dan dan HTML support

[crisp]

btw, hier is de versie te vinden zoals we die nu op GoT gebruiken inclusief compiled .so object. Hierin zijn een aantal bugs gefixed die nog wel in de versie van .oisyn zitten

[Verwijderd]

't gaat hier toch om de implementatie van de css herkenning? Daaruit haal ik dat de code nog aangepast kan worden? Nu weet ik niet hoe die in elkaar zit, maar ik gok dat je aan elk van de styles een aantal regexps kan hangen?

Dan moet het ook wel te doen zijn niet bestaande properties eruit te vissen, values lijkt me wat moeilijker omdat je ook niet-gedefinieerde values kan hebben die geen string zijn (counters bijvoorbeeld).

Is maar een bizarre CSS fantasie maar als het niet de bedoeling is en men dit topic alleen wil gebruiken om de huidige highlighter op robuustheid te checken, roep dan even, want dan houden we er gewoon over op

[crisp]

Verwijderd schreef op vrijdag 10 december 2004 @ 23:31:
't gaat hier toch om de implementatie van de css herkenning? Daaruit haal ik dat de code nog aangepast kan worden? Nu weet ik niet hoe die in elkaar zit, maar ik gok dat je aan elk van de styles een aantal regexps kan hangen?

Dan moet het ook wel te doen zijn niet bestaande properties eruit te vissen, values lijkt me wat moeilijker omdat je ook niet-gedefinieerde values kan hebben die geen string zijn (counters bijvoorbeeld).

Is maar een bizarre CSS fantasie maar als het niet de bedoeling is en men dit topic alleen wil gebruiken om de huidige highlighter op robuustheid te checken, roep dan even, want dan houden we er gewoon over op

Error-checking kan, daar is immers een bestaande class voor om het te visualiseren (rood onderlijnt). Maar om het zo eenvoudig mogelijk te houden zal je dat toch zo eenvoudig mogelijk moeten houden denk ik.
Ik heb zelf niet zo heel veel verstand van lexers, maar de basis is inderdaad reguliere expressies.

[Verwijderd]

CSS is een klein beetje een lastige taal omdat er in principe niet veel onderscheid is tussen selectors, properties en waarden. Op dit moment zijn alles bekende "woorden" uit CSS 2.1 opgenomen in het bestand, maar ik weet in elk geval zeker dat het vrijwel onmogelijk is om te zorgen dat alles helemaal perfect (en ook op de juiste plaats) herkend wordt:

Cascading Stylesheet:

element.relative {
   relative: position;
}

Uiteraard is dit in meerdere opzichten fout en onhandig, maar er is nu eenmaal weinig onderscheid te maken, zonder hele rare trucs uit te halen, denk ik

[Verwijderd]

lastig in de huidige implementatie? of lastig om uit te filteren? Dat laatste zie ik niet zo,
- selectors: alles wat buiten {} staat
- woord, voorafgegaan door een punt: class (\.[a-zA-Z]\w*)
- woord voorafgegaan door een dubbele punt: pseudoclass
- idem id
- voorafgegaan door niks, whitespace, +, >: element
- rules: alles wat binnen {} staat
- voor dubbele punt: property
- tussen dubbele punt en puntcomma: value (kan strings en reserved words bevatten)

of denk ik nu te simpel

[Clay]

ja
bv:

Cascading Stylesheet:

@media screen /* geen selector */ {
   /* selector tussen { en } */
   namespace\:elementNaam:pseudeClass {
      content:";"; /* 1e ; is geen sluiter */
   }
}

Nou is \: om op namespaces te selecten eigenlijk fout, maarja IE kan niets anders.

[ Voor 7% gewijzigd door Clay op 11-12-2004 14:45 ]

[drm]

Cascading Stylesheet:

html > table {
   /* best wel onzin */
}

Cascading Stylesheet:

body > table {
   /* iets nuttiger */
}

Cascading Stylesheet:

nesting {
   error {
}

Cascading Stylesheet:

unclosed {
  string-literal:"'
}

[Verwijderd]

Hmm, iets waar ik net aan dacht:

Cascading Stylesheet:

<style type="text/css">
<!--
 body{
  color:red;
 }
-->
</style>

Dit zie je ook nog wel is in een CSS bestand...

[Switch]

Cascading Stylesheet:

body {
    background-color: #000;
    _color: #fff;
}

Officieel is de underscore hack correcte CSS Hij wordt vooral gebruikt als hack omdat alleen IE begrijpt wat je schrijft. meer info.

Het is niet zo belangrijk, maar als deze hack populairder wordt ziet het er misschien niet zo mooi uit

[Verwijderd]

Euhm, de syntax is wellicht correct, zodat er de mogelijkheid onstaat om CSS uit te breiden met browser specifieke properties. Dat betekent echter nog niet dat het ook valide CSS 2.1 is.

[Verwijderd]

De hele lexer file is zuiver gebaseerd op CSS 2.1, en er is dus totaal geen rekening gehouden met mozilla-only of IE-only properties. Als iets niet wordt herkend is het niet zomaar fout, het is alleen iets waarvoor niets is vastgelegd in de CSS 2.1 standaard. Zo vind ik het een slecht idee om HTML elementen in selectors ook te gaan kleuren. Het is vrij simpel om alle "overige" identifiers een kleurtje te geven, maar dat vind ik misleidend.

Ik heb ervoor gekozen om alleen te highlighten wat herkend wordt. Als je meer uitgaat van het voorbeeld in de appendices, krijg je juist minder zinvolle informatie terug... alle identifiers (woorden) zouden dan dezelfde kleur krijgen.

De mogelijkheden zijn beperkt, en ik denk dat de huidige situatie voorlopig wel voldoet.

[Verwijderd]

Zo vind ik het een slecht idee om HTML elementen in selectors ook te gaan kleuren. Het is vrij simpel om alle "overige" identifiers een kleurtje te geven, maar dat vind ik misleidend.

Het was dan ook meer om een fout aan te geven in jullie parser dan iets anders.

[crisp]

niet zo bizar, maar wel een bug

Cascading Stylesheet:

div { display: block; }
table { display: table; }

[T-MOB]

crisp schreef op vrijdag 18 februari 2005 @ 00:45:
niet zo bizar, maar wel een bug

Cascading Stylesheet:

div { display: block; }
table { display: table; }

Hee... ga je nu m'n bug jatten? geefnie, kon het topic niet vinden...

[Verwijderd]

Cascading Stylesheet:

element {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;

    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #000;

    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;

    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #000;
} 

border-top-style en border-left-color

[crisp]

Verwijderd schreef op vrijdag 18 februari 2005 @ 11:41:
border-top-style en border-left-color

ah, die kan ik wel fixen

[Verwijderd]

Cascading Stylesheet:

test{
 color:#ffff;
}

Dit is dus ook een bug. (Zou het mogelijk zijn de bugs te tellen en onderaan het aantal te geven? En eventueel gebruik te maken van <span> voor regels zodat je de regel(s) waar de bug zit ook nog rood kunt kleuren.

[Woudloper]

crisp schreef op vrijdag 18 februari 2005 @ 11:50:
ah, die kan ik wel fixen

Is dat een fout van de highlighter of van de lexer die cheatah had gemaakt (via dit topic)?

[crisp]

Verwijderd schreef op vrijdag 18 februari 2005 @ 12:17:

Cascading Stylesheet:

test{
 color:#ffff;
}

Dit is dus ook een bug. (Zou het mogelijk zijn de bugs te tellen en onderaan het aantal te geven? En eventueel gebruik te maken van voor regels zodat je de regel(s) waar de bug zit ook nog rood kunt kleuren.

Het is een highlighter, geen validator...

Woudloper schreef op vrijdag 18 februari 2005 @ 12:36:
[...]

Is dat een fout van de highlighter of van de lexer die cheatah had gemaakt (via dit topic)?

Een typo in de lexer; er ontbrak een pipe tussen border-left-color en border-top-style

[Verwijderd]

Het is een highlighter, geen validator...

Als je alleen CSS 2.1 ondersteund lijkt me dat impliceren dat er iets van een validator achter schuilt. Ander zou _color:#foo ook kleurtjes moeten krijgen die niet afwijken van color:#fff.

[crisp]

Verwijderd schreef op vrijdag 18 februari 2005 @ 13:04:
[...]
Als je alleen CSS 2.1 ondersteund lijkt me dat impliceren dat er iets van een validator achter schuilt. Ander zou _color:#foo ook kleurtjes moeten krijgen die niet afwijken van color:#fff.

Hij kleurt gewoon wat hij herkent. Daartoe zit er bijvoorbeeld een lijst van geldige CSS-properties in, en worden kleuren gematched op basis van:

code:

#[0-9a-f]{1,6}

{1,6} is wellicht niet zo handig in dit geval en zou dus beter kunnen, maar om expliciet fouten te markeren is niet de bedoeling van de highlighter.