I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>
Related
i have an html page with alot of links using a tag. i want to open all links in different tabs, instead of setting target="_blank" in all a tags, is there anyway to do it like below in css:
a{target="_blank";}
can anyone please tell, thanks in advance.
Specify a default target for all hyperlinks and forms on a page:
<head>
<base target="_blank">
</head>
source
you can also add a small script
<script>
document.querySelectorAll('a')
.forEach(function(elem) {
elem.setAttribute('target', '_blank');
})
</script>
If all code is in a single HTML file it would be easiest to run CTRL/CMD+F and add target="_blank"to them. This would be very easy to so in Sublime Text for example.
This could also be easily accomplished with PHP.
Usually, CSS is used to style the HTML markup; therefore I see no real value in adding the target with CSS.
I suggest you think about if you actually want to use target="_blank" on all links as this is generally considered bad practice. See https://www.searchenginejournal.com/when-not-to-use-target_blank-link-attribute/19924/
Also, always use rel="noopener" or rel="noreferrer" to your target="_blank" as omitting these is a security risk! See https://web.dev/external-anchors-use-rel-noopener/
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
Is this legal?
<UL>
<NOSCRIPT>
<LI>Foo
</NOSCRIPT>
<LI>Bar
</UL>
I ran it through a validator and it said no, but I'm not so sure it understands NOSCRIPT.
It's not valid but why you don't repeat your ul like this? One for Js and for no Js.
<!DOCTYPE html>
<head>
<title>test</title>
</head>
<noscript>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</noscript>
<script>
document.write("<ul><li>ShowIfJsAvailable</li></ul>");
</script>
It's not legal. A UL may only contain LI elements and script-supporting elements — and NOSCRIPT is not a script-supporting element. Although NOSCRIPT is treated differently based on the scripting environment, that special case is not relevant since it deals with the content model of NOSCRIPT, but the rules here pertain to the content model of UL.
You are better off with designing the page to work without javascript first, and after that you may alter the page with javascript (or better yet, JQuery).
Previous answers already stated that noscript structure is not valid, so ditch that idea.
First write the page as it should look like without javascript, then modify the structure with javascript as you wish it would look like with the javascript on. Remove or add elements after the page is loaded - this is where JQuery and it's $(document).ready() really pays off!
Also your html-file will look much cleaner, and js-file only comes into play if scripts are enabled.
And do not use that document.write(), it will just complicate things.
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
I need to display the following div’s as it is on the screen according to the HTML, but when I print the Claimant Name, Case Info, Contacts, Files should print on 1st page and Claimant Name, Service should print on 2nd page.
Can someone please show me a way to solve it using CSS?
<body>
<div>Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
<div>Service</div>
</body>
You cannot guarantee how HTML is printed - it simply isn't possible. If you need to guarantee how a document will print you'll need to create something like a PDF using iTextSharp or similar
Same answer I posted at CSS Creator:
DIV doesn't lend any semantic meaning so there's most definitely a better way to mark it up. It does involve adding a second name field but I don't see that as any sort of problem.
<!DOCTYPE html>
<html>
<head>
<title>Le documents judiciaires</title>
<style type="text/css" media="screen">
#secondPage .name {
display: none;
}
</style>
<style title="text/css" media="print">
#secondPage {
page-break-before: always;
}
</style>
</head>
<body>
<div id="firstPage">
<div class="name">Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
</div>
<div id="secondPage">
<div class="name">Claimant Name</div>
<div>Service</div>
</div>
</body>
</html>
You can use CSS to show and hide various elements on a monitor display and a printed version. for instance, you could have Claimant Name on the document twice, but the second one is hidden on the screen. It could be visible when printed.
However, you can't control paging when a web page is printed. You may want to consider a pdf or other printed document format for that. HTML is much more oriented towards browser display than paper printout.
With the page break properties (browser support is variable). Make sure that your stylesheet applies to print media.