I have a viewer tab which shows a complete HTML document fetched from the server. The application has a css[main.css] which is applied to all the elements on the screen.
If we apply this to the HTML document shown in the viewer then we loose some formatting like the table border disappears. So we do not want the application's main.css
to be applied to the viewer content. We want to show the document as is.
I see CDATA can be used to do this . The content inside the viewer is wrapped under <div class="ap-mainPanel ap-scrollPanel"> so I want to escape all the content inside
the <div class="ap-mainPanel ap-scrollPanel"> from being rendered using main.css
<![CDATA[
<div class="ap-mainPanel ap-scrollPanel">
</div>
]]>
Not sure how do we specify that we want everything inside the <div class="ap-mainPanel ap-scrollPanel"> to be escaped from applying the main.css
You have 3 main options:
show that tab in <iframe> - as it not accepts parent document
styles
re-apply in main.css rules that will clear content's in
.ap-mainPanel, kind of "css reset"
or predefine already defined rules in main.css to not be applied
in your panel (not() pseudo-class)
You cannot exclude CSS from a part of an HTML document. This has been asked several times at SO, unfortunately mostly with wrong answers given.
If you use a style sheet for a page, or set of pages, you need to design it so that it actually does just what you want. This may require considerably more complicated selectors than you are currently using.
Alternatively, you can display the content as a separate document, as embedded into your main document using iframe (or frame or object, but iframe is usually the most handy). A document displayed in an iframe is rendered independently: only its own style sheets affect the rendering, not the “hosting” document (except that the “hosting document” sets the size of the rendering area and its position).
CDATA sections have nothing to do with this. They disable HTML parsing rules, turning markup to plain text. You don’t want that here.
Related
Jekyll automatically adds an id attribute to headings and a link to that URL fragment that appears when you mouse over the heading.
I want to disable this for a specific heading which is inside an item detail card which always appears at the top of any page, and the link looks out of place in this context.
Is there a simple way to e.g. mark a specific heading to be excluded, or could the link be removed with some JavaScript? Or is there another HTML tag that I should be using for this type of heading?
The heading is in an HTML layout and I'm using the Primer theme.
Example snippet:
<h2>{{ component.name }}</h2>
Result (heading in orange):
This card will probably be floated to the left or right of the main page content, wiki style.
The Primer theme includes AnchorJS in line 26 of the default layout as you can see in the GitHub source.
AnchorJS seems great and pretty flexible. From https://www.bryanbraun.com/anchorjs:
AnchorJS lets you drop deep anchor links (like these) onto any
webpage, and be on your way.
You don't need to set up IDs or worry about URLs. AnchorJS will
respect your IDs if you have them, and generate them if you don't.
It uses an attractive link icon by default, but you can customize the
display via options and CSS styling.
The page also explains different ways how to remove anchors, here's the one you most probably need to target only specific headings:
/**
* Example 2
* Add anchors to all h2s, except for those with a class of "no-anchor".
*/
anchors.add('h2:not(.no-anchor)');
In your case, you could add a CSS class on your special h2 and it will not show an anchor anymore if you target the class with your CSS.
Christian's answer gets to the heart of the issue, but because one cannot change the way Primer adds the links without replacing the whole default.html file, it may be easier to hide the link with CSS.
/* also add class="no-anchor" to heading tags in HTML */
.no-anchor .anchorjs-link {
display: none;
}
However, this leaves the ID intact so someone determined enough could still link to that heading.
Currently my code looks like this:
<div class="carouselTypo">
<p class="carouselTypo__p" data-target="#active1">A</p>
<p class="carouselTypo__p" data-target="#active2">B</p>
<p class="carouselTypo__p" data-target="#active3">C</p>
</div>
The same code could also be written like this:
<ul class="carouselTypo">
<li class="carouselTypo__p" data-target="#active1">A</li>
<li class="carouselTypo__p" data-target="#active2">B</li>
<li class="carouselTypo__p" data-target="#active3">C</li>
</ul>
Now I'm wondering, which one is better or correct? Or does it not matter?
Actually if you remove the default css I don't think it does matter in this case.
but you should always prefer to use the element that represents your elements prototype,
because sometimes the browser has different behavior for different elements.
for example lets take the the anchor tag.
you can make it in tow ways:
create a button which opens the href
create an anchor tag with href
if you remove the default css the look the same but they don't,
because the browser has other way to deal with anchor tag, for example with anchor tag if you hover the anchor you will see in the bottom the url address:, or you will be able to shift-click which opens the link in a new tab.
<button onclick="document.location.href = 'https://stackoverflow.com';">
hover / shift-click doesn't work
</button>
hover / shift-click works
maybe you can make the shift-click yourself for example, but there are more different can't be done by you, for example accessibility service / extensions will probably react different with other tags.
So if you are making a list of something I recommend you to use the ul Although I don't see any different in non style behavior. (but again, for example maybe there is an extension which collects lists data and it won't work on the div method.)
The functional advantage is that divs mean little on their own, whereas ul lis explicitly mean "this is an un/ordered list of items."
The term "semantics" refers to the way that you use the inherent meaning of existing structures to create explicit meaning. HTML is comprised of tags that mean certain things by themselves. And there are established rules/guidelines/ways to use them so that your published HTML document conveys what you want it to mean.
If you list something in your document, then add an ordered list (UL) or an unordered list (OL). On the other hand, the page division (DIV) element is used to create a specific & separate piece of content.
The div element "divides." When you look at a page, there are specific parts like a content body, the footer, a header, navigation, menus, forms, etc. And you can use div tags to create these divisions. Often, the page parts correspond with a visual layout, so using explicit page divisions (DIVs) to cut up your layout in CSS is a natural fit. This way the div tags become structural.
If you misuse or overuse the div tag, it can create unintended meaning & code bloat.
To confuse matters: Google uses h3 and div to "divide" their listed search results. ul > li > h3 + div
So when you turn off all styles (Shift+Cmd/Crtl+S in Firefox w/ WebDeveloper toolbar), the divs should go away, and stack naturally. Your naked HTML should still render a nice page with a clear hierarchy: top to bottom, most important content first, and lists with bullets & numbers for listed items. And it's a good idea to add a link near the top (for non-visual users) that allows you to skip down to main content, important forms, or the main headings (like a table of contents).
Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.
It will affect your code readability. If you use ul and li, your code is more readable.
Okay, so this makes no sense; a little while ago I was playing around with the <h1> tag and I added it to my style sheet. Then I found out I already have that tag below in the style sheet, but when I deleted the old style the colour of the heading goes back to black despite copying and pasting the exact same thing in the two locations.
Furthermore, code to style an object shows up differently in the style sheet and the embedded style, as when I delete the embedded style the object loses its border despite having the same border in the stylesheet. How can I fix this? I want to transfer all of my styles onto the style sheet.
Thank You.
Styles cascade. Part of what that means is that if two styles have the same exact specificity, the one that comes second will take precedence. When you move styles from a <style> tag to a .css file, you may also be moving where it loads in the HTML dom to be before or after some other conflicting CSS. You'll want to either load the .css file at the same place as where the <style> tag or more ideally adjust the specificity so that load order isn't the only factor deciding which rules to use.
I have not worked extensively on Client Side/Front End of the Application and I am trying to read about HTML, CSS and DOM but somehow am not able to figure out difference between them and so would really appreciate if someone can:
Explain me in simple English how does HTML, CSS and DOM work ?
How do they relate to each other from Client Side Technology point of view ?
Update
I have gone through wikipedia articles but not able to clearly understand working of DOM.
Thanks.
What is the DOM?
Let's say you open a web browser (e.g. Chrome) and load a web page in it (e.g. stackoverflow.com). Now, inside the browser, there is an window object. This object represents the browser window.
This window object has dozens of properties (members), the most important of them being the document object. The document object represents the web page that is currently loaded into the browser window.
This document object is the root of the DOM tree:
(source: w3schools.com)
Each box in the above picture is a node inside the DOM tree. A node is an object that is "connected" to other objects from the DOM tree.
The JavaScript programs that are bound to a web page have complete access to every node of the DOM tree. They can delete nodes, add new nodes, or just manipulate the properties of a node.
To sum up, inside the browser there exist hundreds of objects. All these objects are connected (somehow), and this huge structure of inter-connected objects is the DOM.
HTML is what is on your website (headings, lists, tables)
CSS is what those things look like (borders, colours, font sizes)
DOM is how you access those things through javascript (getting nodes, adding new elements, changing their style)
Here is an example of the 3 working together (doesn't seem to work in ie)
http://jsfiddle.net/gj9zT/
HTML describes the structure of a document. The browser parses HTML and constructs an internal representation of the elements of the document from it, like:
document
|
|-body
|
|-div
| |
| |-p
| |
| |-"some text"
|-div
|
|-...
This internal representation is the DOM, the Document Object Model. This is the basis for creating the actual visual representation of the website.
CSS is used to define how this visual representation looks exactly.
Parts of the DOM are also exposed through an API, so you can manipulate the DOM (i.e. the document) using a programming language like Javascript.
Have a look at
Confused by relation between DOM and HTML (APIs)
Difference between html and dom
Its a long explaination but i will try to explain in brief
CSS: These are used to apply property's to html elements. If you want to apply a common color to various html elements we can do it in css and apply that class to html element. We can avoid repeatation of code with css.
We can achieve many other things with css. Read in google
HTML: HTML is nothing but various kind of tags we use to display the elements like tables , divs , p , ul , li etc
DOM: DOM is nothing but the relation between the html elements , we use javascript normally to manipulate the DOM like changing height , moving from one place to another...
There will be lot of links in google , you can better explanations.
HTML (HyperText Markup Language) is the markup we use to describe the structure of our page. It defines the different constructs like <ol></ol> Ordered List or <table> Tables etc...
HTML is the code we start with, it's human readable (well it's supposed to be anyway :p) and easily compressable & transferable.
DOM (Document Object Model) is the framework your computer uses to organize the page it renders from HTML. When your computer breaks down your HTML Document it organizes it into an Object Model which it can more easily work with (and so can you, in javascript/css/etc...).
CSS (Cascading Style Sheets) describe how you want items in your documents to look. They're named cascading style sheets because they "cascade" down to the next one to fill in the holes or override styling. CSS describes the visual qualities of the objects in the DOM.
HTML is effectively the markup of your DOM (Document Object Model). The root of the document is <html>, which contains many levels of <div>s, <p>aragraphs, <h1>eaders and so on.
The DOM is the tree (graphical structure) of your html markup. It will have a 'root', which has many 'children', the children will have 'siblings' and 'parents', 'descendants' and 'ancestors'. The root doesn't have a parent, and is an ancestor of all the descendant nodes. for instance, your typical html document will be structured like this:
<!DOCTYPE html>
<html>
<head>
<title>Banner Example</title>
<style type="text/css">
#header {
background-image: url('branding_logo.jpg');
}
h1 a {
display: block;
height: 120px;
width: 500px;
text-indent: -9999; /* to hide the text that would show */
/* over the banner */
border: 1px solid black;
}
</style>
</head>
<body>
<div id='header'>
<h1>This is a header link.</h1>
<p>Here is some text.</p><p>Here is some more text.</p>
</div>
<div id="content">
<p>here is a bunch of content.</p>
</div>
</body>
</html>
In this case, html is the root node, which has two children: head and body. Head and body are siblings. You can use the DOM model with selectors in order to select which objects (contained in a node) will be affected by code such as CSS.
CSS will take selectors and style them as you specify in its attribute block. You could select all elements <p>, using
p { color: red; }
Or you could select only 'p' where it's a descendant of a div whose id is content:
div#content { color: black; }
CSS will typically style a tag using the most specific DOM description that can be applied to it. So, in my above html example, the first css style will apply to all p, and then the second, more specific styling will be applied to only that one p in the content div.
Essentially, what happens is your browser will parse your HTML code into sections that allow them to be selected individually. That parsed structure is your DOM. CSS uses the DOM to apply styles. jQuery does the same, allowing you to select a specific node from the DOM and apply styles or actions to that node dynamically on the client side.
I'm editing books/articles in HTML. These texts were printed once and I scan them, convert them into an intermediate XML-Format and then I transform them into HTML (by XSLT). Because some of those texts are extinct from the market today and are only available through the major libraries I want to publish them in a way so that people could possibly cite them by referring to the page numbers in the original document. For this purpose my intermediate XML-format has an element that marks a page-break. Right now I'm working on the XML->HTML transformations and I'm wondering myself how to transform these page breaks in HTML. They should not appear in the final HTML by default (so a simple | doesn't fit) but I plan to wrap these documents with some lightweight JavaScript that will show the markers when needed. I thought about <span>s with a | in it that are hidden by default.
Is there a better, possibly 'semantic' way to this problem?
Page breaks are very much a thing of layout, and HTML isn't designed to describe layout, so you aren't going to find anything that is semantic for this within the language.
The best you can hope for is some sort of kludge.
Since a page break can occur in the middle of a paragraph, and <p> elements can contain only inline elements you can eliminate most of the options from the outset.
The two possibilities that suggest themselves to me are <span> and <a>. The former has no semantics, that latter is designed to be linked to (with a name attribute) or from (with an href attribute), and you could consider a page from an original document something that you might wish to link to.
No matter what element you use, I wouldn't include a marker in it and then hide it with CSS. That sort of presentational flag is something I would consider adding via :before in a stylesheet (combined with a descendent selector for a body class that can be toggled with JS since you want the toggle)
Alternatively, if you want to take a (very) broad view of the meaning of "HTML" you could consider the l element (from the defunct XHTML 2 drafts) and markup each line of the original document. Adding a class would indicate where a new page began (and you could use CSS counters and borders to clearly indicate each page and number it should you so wish). Pity the browser vendors refused to get behind a real semantic markup language and favoured HTML 5 instead.
Use a <div class="Page"> for each page, and have a stylesheet containing:
.Page {
page-break-after: always;
}
Maybe you can use an xml tag not parsed/interpreted by html like <pagebreak/>.
In this way viewing the html the tag will be not rendered but using jQuery or any other Javascript library, transform, when asked, these particular tags in standard or whatsoever visual mark.
I think this can be a semantic approach...