search

omeka / plugin-CSSEditor

3 stars 2 forks source link

Allow all pseudo class and element from CSS3 #4

Open AnneGF opened 5 years ago

AnneGF commented 5 years ago

Could it be possible to allow all the pseudo-class and pseudo-element.

I see that only 'first-child', 'link', 'visited', 'active', 'hover','focus' (application/libraries/htmlpurifier/HTMLPurifier/Filter/ExtractStyleBlocks.php), but maybe CSS Editor could redefine that and authorize all of them as listed in https://www.w3schools.com/css/css_pseudo_classes.asp

Thanks for your answer!

librarygnome commented 3 years ago

Can confirm this is still an issue. Modern clearfix is being stripped out (i.e. using :after).

Additionally, it is stripping out final ; in all CSS statements, which makes no sense? It's standard to have it.

lipeck commented 3 years ago

i am also having this issue with :after

zerocrates commented 3 years ago

The pseudo-classes/pseudo-elements supported are hardcoded into HtmlPurifier, so we can't easily change them. Trying to get them added to the upstream HtmlPurifier is an option, but just the pseudo-elements is probably not enough as I would bet the content style isn't allowed either, so they can't be used usefully unless some other style is already "creating" the pseduo-element.

The semicolon issue is a setting of the CSS Tidy library, I think... we can probably fix that so it stops doing that.

jorge-vitrubio commented 2 years ago

he pseudo-classes/pseudo-elements supported are hardcoded into HtmlPurifier, so we can't easily change them.

it seems the part of code doing the nasty is the css minifier

https://github.com/omeka/plugin-CSSEditor/blob/master/CSSEditorPlugin.php#L33

if you check that code is 9 years old, it is strapping moder standard CSS2 and CSS3

https://github.com/omeka/plugin-CSSEditor/blob/master/libraries/CSSTidy/class.csstidy_optimise.php https://github.com/omeka/plugin-CSSEditor/blob/master/libraries/CSSTidy/css_optimiser.php

would be a good idea to update the library maybe most problems could be solved. https://github.com/Cerdic/CSSTidy

megtrip3 commented 1 year ago

I've been trying to fix my search button icon, but unless I'm granted access to the backend, I need to be able to use both :after and content:"". I've also noticed that the CSS editor in Omeka Classic does not like @media queries. Luckily so far, what I've needed to adjust is specified with "-mobile" somewhere in the #id, so I've been able to work around it. Why can't the CSS Editor in Classic work the same as in S? S's CSS Editor is amazing with leaving the code alone! I was able to make notes and change anything I wanted as long as I got my selectors and CSS right. S's HTML blocks were also great (but that's not pertinent to this conversation...)

zerocrates commented 1 year ago

Slight update here that we did in fact modify CSS Editor to support more pseudoclasses/elements: the supported list is now :first-child, link, visited, active, hover, focus, before, after, first-letter and first-line.

The important restriction there though is that content is still currently not supported. So you can modify the styling of before/after elements already set up by the theme or a plugin by targeting the :before/:after, but you can't add your own or modify the content used as those require the content property.

Modifying the whole way the plugin works to not filter the styles is a little problematic from a standpoint of expectations of existing users, but it could potentially be an opt-in setting or mode.