5 ms·

Off topic: does anyone know why are the tags and attributes not selectable in the page?

nyanpasu64 6y ago
Because they're defined via CSS ::before{content} and ::after{content} properties, and browsers don't make that text selectable for some reason.
- tzot 6y ago
  It's very useful when having stuff like that: <style type="text/css"> .code-line::before {content: '>>> ';} </style> <div class="code-line">print 12</div> <div class="code-line">a = [i**2 for i in range(10)]</div> Then the reader can copy the actual code without the interpreter's prompt.
- theandrewbailey 6y ago
  When text-transform is used on an element, the copy-pasted text is the original text from the DOM, not the transformed version. There needs to be a CSS property that makes the visible text selectable and copyable.
  - cestith 6y ago
    Preferably there would be a browser option to choose whether or not to do this in the menu for interacting with the selection. The CSS could set the default and the browser could allow you to override it when you're interacting with the text.
LeonB 6y ago
That’s not off topic at all, very astute observation. Pseudo elements are not part of the DOM. They’re not really there. Here’s a HTML reference https://www.w3.org/TR/CSS2/selector.html#pseudo-elements https://www.w3.org/TR/CSS2/selector.html#pseudo-elements
- tannhaeuser 6y ago
  IMO nothing shows the absurdity of CSS more than before/after rules.
  - Santosh83 6y ago
    Can you expand a bit on this? What are the reasons you consider them absurd, and CSS in general? (honest question) As someone who used pseudo before/after in my own code, I'd be interested in their potential downsides or issues.
    - tannhaeuser 6y ago
      Arguing strictly from a language design PoV, and having used before/after myself, if markup is for content/structure, and CSS is for presentation, then it's just idiosyncratic af to generate content from CSS rules. Obviously, the purpose of before/after is to produce a visual effect; then why produce pseudo-content if CSS is oh-so-great a language for presentation? But IMO that's par for the course for CSS which starts out by migrating rendering properties that used to be HTML attributes into their own syntactic category that's neither here nor there, then postulates a structure/presentation dichotomy after the fact. When actually markup attributes are intended exactly for the purpose of holding rendering properties rather than some elusive "structural semantics" bs. Going from there, it feels like CSS heads got lost in their maze of separation of concerns story, which in any case has never needed new syntax, let alone a thousand micro syntaxes.
      - lqet 6y ago
        > Obviously, the purpose of before/after is to produce a visual effect; then why produce pseudo-content if CSS is oh-so-great a language for presentation? Because sometimes the best way to style something is by using a character (bullet points, arrows, ...). Example: you could add a symbol to URLs by giving <a> a slight padding on the left and by adding an image showing an URL symbol. But by using 🔗 in a:before, you cheaply get vector graphics, and a symbol which (in a perfect world) will always match the font.

Because they're defined via CSS ::before{content} and ::after{content} properties, and browsers don't make that text selectable for some reason.

tzot 6y ago
It's very useful when having stuff like that: <style type="text/css"> .code-line::before {content: '>>> ';} </style> <div class="code-line">print 12</div> <div class="code-line">a = [i**2 for i in range(10)]</div> Then the reader can copy the actual code without the interpreter's prompt.
theandrewbailey 6y ago
When text-transform is used on an element, the copy-pasted text is the original text from the DOM, not the transformed version. There needs to be a CSS property that makes the visible text selectable and copyable.
- cestith 6y ago
  Preferably there would be a browser option to choose whether or not to do this in the menu for interacting with the selection. The CSS could set the default and the browser could allow you to override it when you're interacting with the text.

LeonB 6y ago

That’s not off topic at all, very astute observation. Pseudo elements are not part of the DOM. They’re not really there. Here’s a HTML reference https://www.w3.org/TR/CSS2/selector.html#pseudo-elements https://www.w3.org/TR/CSS2/selector.html#pseudo-elements

tannhaeuser 6y ago
IMO nothing shows the absurdity of CSS more than before/after rules.
- Santosh83 6y ago
  Can you expand a bit on this? What are the reasons you consider them absurd, and CSS in general? (honest question) As someone who used pseudo before/after in my own code, I'd be interested in their potential downsides or issues.
  - tannhaeuser 6y ago
    Arguing strictly from a language design PoV, and having used before/after myself, if markup is for content/structure, and CSS is for presentation, then it's just idiosyncratic af to generate content from CSS rules. Obviously, the purpose of before/after is to produce a visual effect; then why produce pseudo-content if CSS is oh-so-great a language for presentation? But IMO that's par for the course for CSS which starts out by migrating rendering properties that used to be HTML attributes into their own syntactic category that's neither here nor there, then postulates a structure/presentation dichotomy after the fact. When actually markup attributes are intended exactly for the purpose of holding rendering properties rather than some elusive "structural semantics" bs. Going from there, it feels like CSS heads got lost in their maze of separation of concerns story, which in any case has never needed new syntax, let alone a thousand micro syntaxes.
    - lqet 6y ago
      > Obviously, the purpose of before/after is to produce a visual effect; then why produce pseudo-content if CSS is oh-so-great a language for presentation? Because sometimes the best way to style something is by using a character (bullet points, arrows, ...). Example: you could add a symbol to URLs by giving <a> a slight padding on the left and by adding an image showing an URL symbol. But by using 🔗 in a:before, you cheaply get vector graphics, and a symbol which (in a perfect world) will always match the font.