search

daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 519 forks source link

What does this CSS do/ is this valid? #324

Closed davidjn closed 8 years ago

davidjn commented 8 years ago

Hi,

Was browsing the CSS and noticed this selector:

table.md-table tr.md-row[ng:repeat].ng-leave, table.md-table tr.md-row[ng-repeat].ng-leave, table.md-table tr.md-row[x-ng-repeat].ng-leave, table.md-table tr.md-row[data-ng-repeat].ng-leave { display: none; }

I'm not a CSS expert, but as far as I can tell "table.md-table tr.md-row[ng:repeat].ng-leave", is not a valid selector (notably the ":", https://www.w3.org/TR/css-syntax-3/#escaping0).

Can you please help me understand what is going on here, and what this specific selector does for the angular md data table?

FWIW, here is a quick JS fiddle - https://jsfiddle.net/7nbptdas/2/

Thanks!

davidjn commented 8 years ago

Note: the code above has been escaped, the real code looks like:

table.md-table tr.md-row[ng\:repeat].ng-leave, table.md-table tr.md-row[ng-repeat].ng-leave, table.md-table tr.md-row[x-ng-repeat].ng-leave, table.md-table tr.md-row[data-ng-repeat].ng-leave { display: none; }

and

table.md-table tr.md-row[ng\:repeat].ng-leave

Is the concerning selector due to the \: block.

daniel-nagy commented 8 years ago

Straight from the link you provided.

Any Unicode code point can be included in an identifier or quoted string by escaping it.

In the angular world ng-repeat, ng:repeat, x-ng-repeat, and data-ng-repeat are all valid attributes (i.e. will be compiled by angular).

The purpose of that CSS is to prevent rows, being removed, from displaying while items in the repeater change. This is easily observed by commenting out that block of CSS and paginating the items. I believe for most people this would be the desired effect. If you want to animate the rows leaving then you would have to overwrite that CSS.

davidjn commented 8 years ago

Hi Daniel, thanks for the quick response. My apologies for the confusion in the first post. The concerning attribute is:

[ng\:repeat]

Is the \ character meant to escape the colon? If not, what does the \: in [ng\:repeat] do?

Also, apologies turns out to be more of an angular question rather than related to md-data-table specifically.

Thanks again!

daniel-nagy commented 8 years ago

You are correct, the \ is just escaping the colon. I believe this is necessary because the : is part of the CSS language. For example,

li:first-child {
  color: red;
}

will color the first list item red.

davidjn commented 8 years ago

According to the original link:

CSS escape sequences start with a backslash (), and continue with:

  • Any Unicode code point that is not a hex digits or a newline. The escape sequence is replaced by that code point.
  • Or one to six hex digits, followed by an optional whitespace. The escape sequence is replaced by the Unicode code point whose value is given by the hexadecimal digits. This optional whitespace allow hexadecimal escape sequences to be followed by "real" hex digits.

I think : is neither a unicode code point, nor one to six hex digits, and thereby not valid CSS. It certainly seems to work the same way as [ng:repeat] (see https://jsfiddle.net/7nbptdas/2/), so I'm not really sure what's going on.

Sorry for being pedantic here- trying to understand the nitty gritty CSS.

Thanks again!

daniel-nagy commented 8 years ago

The colon is a lexeme of the CSS language so, my guess would be, by escaping it you are telling the interpreter to evaluate the colon literally.

davidjn commented 8 years ago

Ok great. Thanks for the discussion and nice work with the library!

daniel-nagy commented 8 years ago

You're welcome! I'm happy to hear you are finding it useful.