I'm having difficulty in inserting html tags through CSS and for it to be interpreted as html.
I want to write <noscript><h2>Please enable javascript!</h2></noscript> after the h1 header on all pages; so I have
h1:after
{
content: "\003cnoscript\003e\003ch2\003ePlease enable javascript! \003c/h2\003e\003c/noscript\003e";
}
in my CSS.
Whilst this successfully writes
<noscript><h2>Please enable javascript!</h2></noscript>
It is treated as a string literal and displays it on the page as part of the original h1 header.
For obvious reasons I cannot use javascript for this particular task :P
From W3 :
Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).
Content in <noscript> is displayed only when javascript is disabled.
Related
Suppose we added the image in CKEdtitor and aligned it to right:
CKEditor will add image and image-style-align-right classes to figure element:
<p>Lorem ipsum of something like this </p>
<figure class="image image-style-align-right">
<img src="https://XXXXX.com/116cc956-4cf4-4d2a-98cf-ffa69ab0eb3c.jpeg">
</figure>
Now we want the inputted HTML will be submitted by email? Above HTML must be submitted to the backend, then all styles must be converted to inline CSS. But how the backend will know about .image, .image-style-align-right and similar CSS rules?
There are below styles in theme/imagestyle.css file of #ckeditor/ckeditor5-image package:
/*
* Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
:root {
--ck-image-style-spacing: 1.5em;
}
.ck-content {
& .image-style-side {
float: right;
margin-left: var(--ck-image-style-spacing);
max-width: 50%;
}
& .image-style-align-left {
float: left;
margin-right: var(--ck-image-style-spacing);
}
& .image-style-align-center {
margin-left: auto;
margin-right: auto;
}
& .image-style-align-right {
float: right;
margin-left: var(--ck-image-style-spacing);
}
}
Problem 1: The source styles are in frontend and written by PostCSS
First, above code is PostCSS. Because I must not migrate to PostCSS just because using the CKEditor, I can not include this file to my source code written by other CSS preprocessor. In frontend, the Webpack compiles these styles an apply it dynamically when application starts (I mean, no file with compiled CSS available):
But how to bring up these styles to server?
Problem 2: How to bring up to server only these CSS classes which will be used and no more?
Well, even if I convert above .image-style-side , .image-style-align-center etc. to CSS and submit them to server, I will be enough only for Image feature. But the other CKEdtitor plugins adds other CCS classes and these classes are in numerous of other files!
Сonversely, there are a lot of CKEditor classes in which we are don't need on backend, e. g. ck-editor__editable, ck-rounded-corners, ck-editor__editable_inline: there classes are for CKEditor's GUI and will not require once editing will done?
Problem 3: The CSS variables
Above listing includes the CSS variables like --ck-image-style-spacing, --ck-image-style-spacing etc. To make inline CSS, server must know about them too.
As you stated, there are several major time consuming problems to be solved with approach that you took.
Key to a successful email template is compatibility with many different email clients.
Email clients support archaic HTML tags, such as <table> for creating layout. Inline styles are also preferred. Many modern CSS properties are not supported at all. For example, border radius is not compatible in some clients, so rounded buttons will actually be button images instead of code. Different fonts are also not rendered.
If I were you (and if CKEditor doesn't have email templating), I'd post the template you created to some of the freelancer platforms out there and say 'guys, how much to convert this HTML to email compatible HTML'. That's the fastest and cheapest way. Test resulting code by sending it in email and checking it out in different email clients.
Other way is for you to get to know what creating HTML and styling for emails is all about. Good starting point is to analyze (and perhaps reuse) HTML from HTML emails that you received from, let's say, your local cell service provider.
You'll need to do a research on the topic to find out what suits your needs, but here are some basic guidelines:
supported HTML tags in emails
step-by-step guide to creating email templates
as i am new to CQ5.5
I was wondering if it is possible to add a css script within a CQ5.5 componenet.
Script as follow alike
< style type="text/css">
.testScript
{
margin: 0;
padding: 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
< /style>
As when i tried to do this and run my html site through the wc3 validator, i have to following error
document type does not allow element "style" here < style
type="text/css" > The element named above was found in a context where
it is not allowed. This could mean that you have incorrectly nested
elements -- such as a "style" element in the "body" section instead of
inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML
documents. Due to HTML's rules of implicitly closed elements, this
error can create cascading effects. For instance, using XHTML's
"self-closing" tags for "meta" and "link" in the "head" section of a
HTML document may cause the parser to infer the end of the "head"
section and the beginning of the "body" section
Does it means it requires it to enclosed within the tag of an or it is not advisable to write css within the codes of an component?
Any other ways to do it?
The STYLE tag, according to the w3c recommendation, allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document, though it is not explicitly stated that you shouldn't be adding it elsewhere in the document.
Going by the standards, validators would fail this test case as HTML DTD expects it to be within the HEAD section. And that is exactly the reason why you get the error mentioned in your question. But then, you would still get the expected result because almost all the modern browsers support it anyway.
If you are to follow the best practices, it is advisable to avoid specifying the styles within the component's JSP because
If a component is added to the page multiple times, the same css would be added in multiple locations in the page.
It is invalid markup as per the DTD.
It would become difficult to maintain and manage, and any change
requires the developer to look at multiple locations.
It is ugly.
One way to work around this is using the Client-side HTML library(clientlibs) feature provided by CQ5(AEM). This allows you to organize your component specific styles and scripts within the corresponding clientlibrary folders and using the cq:includeClientLib tag you can include them in your JSP.
But this would include a <link> or <script> at the corresponding location where the cq:includeClientLib is used, which again is an invalid markup according to the w3c validator. Also, adding the component multiple times in the same page, leads to inclusion of multiple link tags in the document.
To overcome this, you could use the embed feature available in clientlibs to embed all the component specific client libraries of your project into another clientlibrary within your design folder present in /etc/designs. Then you can include the embedded clientlib in your page's head section along with your projects global clientlibs. This makes sure that all your component specific styles are added only once, as well as access is restricted to application specific folders to the end users as your files are delivered from /etc and not /apps.
For more on creating and using Client-Side HTML Libraries, refer this doc.
The best way to organize this is using an specific namespace on your component such as:
<!-- jsp component -->
<div class="namespace">
<!-- your stuff here -->
<h1> <%= title%> </h1>
</div>
and then create an specific design as a custom-skin and then using that namespace:
/* newDesign - css file */
.namespace h1{ color:red }
or with less:
/* newDesign - less file */
.namespace{
h1{ color:red; }
}
hope it can help.
I'm trying to make a css-selector that assigns diffrent properites based on weather the html is inside an iframe or not. I tried this:
html:not(:root) body {
background: black !important;
}
I expect this to apply background: black; to the body if it's inside an iframe, but it doesn't, why? And are there any css options? I could always check with javascript if html is root.
IE8 support not requierd.
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.
This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
It is probably possible to do the styling in an iframe with JavaScript.
document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';
IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
Accessing elements inside iframes with JavaScript document futher here: Javascript - Get element from within an iFrame
Posting my comment as an answer for better display, you should:
Put "is in iframe" detection code in JS, as I don't see any other way of doing so
Put CSS code inside the iframe depending on the JS result
So if all code is inside the iframe, do:
if (window.parent !== window) {
document.documentElement.classList.add('inside-iframe');
}
html.inside-iframe {
bkacground-color: black;
}
If you want the detection-JS-code to be inside the parent frame, go for:
document.querySelectorAll('iframe')
.forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));
Assuming the iframe is loaded when executing this JS (otherwise, contentDocument/documentElement will not exist). You may rely, in such case, on load event of the iframe (but it seems better anyway to put "is-in-iframe" detection indise the iframe itself, as the corresponding CSS is inside the iframe too)
html:not(root) body {
background: black !important;
}
Works
Basically what I'm trying to do is copy this style (from a word doc) but using rst.
I was thinking I might need a custom directive which I can can include the header and style the internal checkboxes.
Ideally I would like to be able to do something like:
.. handson::
The title
- Check one
- Check two
The bulltet items inside the handson block would be styled as checkboxs but the rest of the document would just have normal bullet points.
I had a look at the custom directive stuff but I'm not sure if that would be the best way to tackle this. I'm also using rst2pdf if that has any impact on the results.
If you don't want to go down the route of creating a custom directive, you could use a normal admonition block and "fake" the check boxes. Your markup could be standard reStructuredText:
.. admonition:: The title
- Check one
- Check two
You can then include some custom CSS markup within your reStructuredText file to target list items in admonitions:
.. raw:: html
<style>
.admonition ul { list-style-type: none; }
.admonition li:before { content: "\2610"; }
</style>
Here the CSS targets any list item element which is a child of any element with the class "admonition" and replaces the list item bullet points with simulated check boxes using the Unicode Ballot box character, ☐.
Docutils applies an additional class to generic admonitions which is a concatenation of "admonition" and the admonition title. So in the above example we could be more specific with the element we target with the CSS rule:
.admonition-the-title ul { /* ... */ }
This could be used to target a single admonition within your document.
Credit goes to these two answers to the SO question How to create a checklist in reStructuredText (reST)?
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.
Some modern browsers convert links like
Site
into
Site (http://somesite.com)
as part of the generated PDF.
Is there a way to omit the links from the generated PDF version by pure CSS?
Which CSS classes in the print.css must be defined in order to suppress the link URLs?
Here is an example for the way to manipulate the styling of <a href=...> tags inside a CSS file to make it appear as you dislike it:
#media print {
##....
a[href]:after {
content:" ("attr(href)")";
color:#868686;
background-color:inherit;
font-style:italic;
size:90%;
}
##....
}
To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):
a[href]:after {
content:"" !important;
}
Your question is not very clear about the scope of your requirement:
Should it be valid just for a website you control and for the users visiting it?
Should it apply to any web page you visit?
If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server
If you want the second, you should google for "user stylesheets" to find links like the following:
Accessibility Features of CSS: User override of styles
Tap the power of Mozilla's user style sheets
How to write a user stylesheet for Safari