Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

CSS style hints in style attributes #11830

Closed
igormakovsky opened this issue Oct 16, 2015 · 12 comments
Closed

CSS style hints in style attributes #11830

igormakovsky opened this issue Oct 16, 2015 · 12 comments

Comments

@igormakovsky
Copy link

Old Subject: CSS style hints in <style> tags

They just don't appear when writing inline styling.
That is kind of unavoidable routine for those working with html emails.
@redmunds
Copy link
Contributor

@igormakovsky This seems to work for me in a .html file. Start by using Debug > Reload Without Extensions to make sure it's not caused by an extension you installed.

Otherwise, please provide a <style> block example and let us know what's the file extension of your page.

@igormakovsky
Copy link
Author

The example can be dead simple, here it is — file extension is 'html':

<html>
<head>
</head>
<body>
    <p style="margin-top:1em;">Here it is</p>
    </body>
</html>

@redmunds
Copy link
Contributor

@igormakovsky I see now that you did say "inline styling", but that's a style attribute (not tag). Unfortunately, that is not yet supported.

@redmunds redmunds changed the title CSS style hints in between <style> tags CSS style hints in in style attributes Oct 16, 2015
@redmunds redmunds changed the title CSS style hints in in style attributes CSS style hints in style attributes Oct 16, 2015
@redmunds
Copy link
Contributor

I haven't done any html email authoring in a while, but I think you can define classes in a <style> block and then apply classes to your elements.

@petetnt
Copy link
Collaborator

petetnt commented Oct 17, 2015

Email authoring is still the same pain in the a**, so it's still best to do it like it's 1999 and just to inline all the styles if you want decent client support.

Luckily there are other ways to work around the issue, just as https://github.com/SLaks/Styliner or this inliner tool MailChimp provides: http://templates.mailchimp.com/resources/inline-css/.

Lately I have been writing my email templates with React + inline styles and using [ReactDOMServer.renderToStaticMarkup](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup) which basically achieves the same goal but with React benefits!

Not really solutions for original issues, just ideas how to make email authoring a bit more reasonable in 2015 🍨

@unapieer
Copy link

Does anyone know of a extension that can do the same thing?

@redmunds
Copy link
Contributor

I'm not aware of any extensions for this. To implement this, the CodeMirror htmlmixed mode will need to be updated to detect style attributes and switch to CSS mode in the value string. Let me know if you're interested in taking this on would like any more info.

@unapieer
Copy link

Thanks for replying. I think I talked with you before on another message about my issue/thoughts. You told me about getting my hand dirty with the code. I did take a crack at it but haven't made much progress with it. Thanks for the help.

@redmunds
Copy link
Contributor

@unapieer

I did take a crack at it but haven't made much progress with it.

I think this would be great addition to Brackets. Post your code somewhere so we can take a look and try to get it working. This will eventually need to be submitted to CodeMirror and then pulled into Brackets.

@sprintr
Copy link
Contributor

sprintr commented Apr 19, 2018

@swmitra I believe this issue can be closed now.

@swmitra
Copy link
Collaborator

swmitra commented Apr 19, 2018

Thanks a lot @sprintr for the reminder 👍 . I missed this issue completely while authoring the feature. Will close it by putting the reference of the original PR.

@swmitra
Copy link
Collaborator

swmitra commented Apr 19, 2018

Closing this issue as the requested feature is implemented as part of #13270.

@swmitra swmitra closed this as completed Apr 19, 2018
@core-ai-bot core-ai-bot mentioned this issue Aug 30, 2021
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@redmunds @sprintr @igormakovsky @petetnt @unapieer @swmitra and others