I have Google'd this nine-ways-to-Sunday, but can't seem to come up with anything that fits my needs... I'm looking for a Firefox extension (and or Eclipse plug-in) that does the "opposite" of what SitePoint's handy Dust-Me Selectors does. Briefly, I want to be able to go to a page and get a summary of all the class and id attribute values that are specified in the HTML markup. Dust-Me is more stylesheet-centric, in that it compares the used and unused STYLESHEET selectors to what appears on the page. I need to find classes and ids that are specified in the page, but have no corresponding stylesheet selector, or no stylesheet at all for that matter.
The venerable Web Developer extension for Firefox does exactly this, EXCEPT, it's overlayed on the rendered page, which is not quite what I need. I'd like output more akin to Dust-Me; i.e., a summarized list.
Sure, I can do this with command-line grep... except that I can't, because I'm dealing with JSF, and I wanted to see what the rendered output in the browser is.
Another reference is PrimerCSS. It does "sort of" what I want, but I'm looking for a more on-the-fly, Firefox solution; and again, a list-- not a template. PrimerCSS makes you copy/paste the markup into a form on the site, and then comes up with a naked CSS stylesheet. Useful, but not.
Any leads?
It sounds to me like Firebug combined with the CSS Usage plugin would get you what you want.
Related
Is there any harm if custom tags are used and created based on one's choice?
like the one below
<hello>hi there!</hello>
I tried using CSS
hello{
color:red;font-family:arial;
}
The above code works
I have used the above and also can add CSS. is there any harm of doing this, or the CSS features these won't support?
This is purely out of curiosity so don't suggest CSS edits or solutions please.
Why you can't make up elements
It is not valid HTML. Therefore how it behaves will be unpredictable.
It may work in some browsers, currently, but if any of your users visit your site on a different browser, they may get a totally different experience. Further to that, support could be dropped, or change at any time without warning.
Other options for custom elements
It is actually possible to define your own Document Type Definition (DTD), however that too is not a good idea.
Your best bet is to either stick with normal, well-supported HTML elements (see here for list of valid elements), or to use a web component framework, such as Vue, Angular or React, for custom elements/ components.
Don't forget, that you can add the class attribute (as well as others) to any element for styling, so for your use-case, there isn't any need to have additional elements.
Fragments (or hashes) in URL are widely used to specify some specific fragment in a document.
For example, the fragment below
http://example.com/page.pnp#<fragment>
Usually references something like <div id="<fragment>" /> or <a name="<fragment>" /> in a HTML document.
There is a standard to support CSS selectors as a fragment, like so:
http://example.com/page.pnp#css(<CSS selector>)
Are there any applications using it? Would it be nice for browser to support it? For example, browser could display only the selected fragments of the page or highlight the selected fragments. Or provide an option for developers to highlight the selected fragments with CSS or JS. Can somebody submit it to the relevant browser devs as a feature request?
What are other ways to reference specific content in a HTML page? For example, if I want to comment on some specific element in a HTML page, what are any other ways to specify that position in the document, preferably by using URI, or some other convenient identifier?
The document you link to isn't really a standard; it even says "Unofficial Draft" in the subtitle, and under where it says Status:
This document is merely a public working draft of a potential specification. It has no official standing of any kind and does not represent the support or consensus of any standards organisation.
... so it is completely inappropriate to refer to it as a "standard". A better term for this would be "concept" or "experiment".
That being said, rudimentary implementations exist (or at least, they did at the time it was first published) in the form of browser extensions; you can find links to these in section 8.
AFAIK, though, there hasn't been any activity around this at all after the first few months since the community group for this was formed and I joined. Either it never gained traction or it just wasn't very feasible to implement after all.
For now, as always, fragment identifiers can only point to elements with the respective id attribute, or named anchors. It seems it'll remain that way for the foreseeable future.
For Chrome, There's a Jquery Fragement selector extension:
With the advent of edge extensions it will likely become easy to implement in edge.
I have made a small popup window that shows up at the bottom of the page (like a recommendation system). But whenever I embed my script to any of the client's website, it disturbs my CSS. Like the CSS which is on the client's website overshadows my CSS and this causes me to fix my CSS for each client. Is there a fix that I will have to install on my code?
Please help
Thanks
This is due to overlapping CSS properties of client's and your newly developed. I recommend you to inspect element of google chrome's very nice feature. You can individually identify your overlapping properties. If this is too much complex. Like James commented give a new id to your pop-up menu, which will separate your pop-up CSS from all other components on your web page
On of the ways I heard about is Shadow Dom, and in this article it describe it and at the beginning of the article he listed the problem in brief: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
But there is a fundamental problem that makes widgets built out of
HTML and JavaScript hard to use: The DOM tree inside a widget isn’t
encapsulated from the rest of the page. This lack of encapsulation
means your document stylesheet might accidentally apply to parts
inside the widget; your JavaScript might accidentally modify parts
inside the widget; your IDs might overlap with IDs inside the widget;
and so on.
Else which I did my self long time ago is: to name all your ids, classes with a special names for example 'mywebsite.myclass' this may minimize the issue. and I saw this way is used by many bookmarklets which import html,css and javascript to user opened page.
"All browsers" is a lot of browsers :P
CSS is going to get interesting soon thanks to shadow DOM. You are going to be able to create a web component that is completely isolated, DOM and CSS, from the rest of the document, which is exactly what you want.
Obviously, it's not in place in al browsers (only in Chrome at the time of me writing this). Meanwhile, this is what I would do:
Use shadow DOM components if available
Anyway, manually name-space everything you use (CSS classes, JavaScript, etc)
Try to use custom elements for everything. (that way, there's less risk of your e.g. <h2>s being styled by outer CSSs)
As a last resource, use very specific selectors (look up CSS specificity), and use !important. Just to be clear: never do this routinely!
Most of that stuff will fail for some value of "All browsers". You'll have to compromise somewhere, I guess.
Yes you can reset your div styles.
Something like this:
div.your-popup * {
/* your reset */
}
And try to set !important to styles or put them inline.
In addition create unique class names that no one can override it.
P.S. http://www.cssreset.com/
I have some special tags on my blogsite which need to be as simple as possible so that my colleges who don't know anything about HTML can use it. For example
<question>...</question>
and
<answer>...</answer>
and then these are styled in CSS. It's far easier for HTML-idiots than to use the <div class="answer">...</div> format.
I've just found out IE8 is displaying it all wrong while Firefox and Chrome do it right. Is that expected or am I doing something wrong? Do you know of any hack to fix this since there are tons of blogsposts I'll have to manually change otherwise!!
You want to create <question>...</question> etc.
These are not HTML (not even HTML5), and you will struggle to get browsers to understand them reliably.
A quick tip that might help you:
You say you've got it working in all browsers except IE. If so, you might be able to hack IE to get it working as well, using a technique similar to the hacks like HTML5Shiv that are being used to get IE to work with the new HTML5 tags. These use Javascript to create a DOM element with the new tag name, after which IE suddenly starts to recognise that tag as being valid HTML.
It might just work. But be aware that it is a hack, and it only targets IE. And since you're using non-standard tags, you also have no way of knowing what will happen in the future in terms of it breaking browsers, even if they work now. (in fact, I would say the worse case scenario would be if one of the tags you've invented is added to the HTML standard at a later date, because then you'll start getting weird layout glitches as it gets added to the default stylesheet)
If you can get it working that way, then well done. But consider yourself warned that it's not good practice.
What you have actually asked for is not HTML, but XML markup. This is perfectly fine, but shouldn't be put directly into a web page in the way you're hoping.
There are a number of well-documented ways to get raw XML code into a browser.
One option is to use XSL to transform it into valid HTML. Another way would be to load it into a DOM object in Javascript and process it using a script. (this is where the 'X' comes in 'Ajax').
My guess is that a simple XSL transformation would do the trick for you. (In fact, it sounds like your use case might be simple enough that even just basic string replacement might suffice for the same end result). You can get your colleauges to create the code using <whatever> <tags> <they> <want>, and you write a script that parses it and converts it to regular HTML prior to merging it with the rest of the page.
In the long term, this would probably be a far better solution than the hack I've described above.
Hope that helps.
I don't know if this answer fits your needs but imho using custom html tags is basically NOT using HTML. Therefore the absence of compatibilty.
If you need to render data in HTML wouldn't be better using XML + XSLT?
You can find guides on w3schools
You can't add new elements like that. HTML has some fixed elements that browsers understand, but if you add your own, browser don't know what to do with them.
HTML5 has some new elements you can maybe find useful : http://www.w3schools.com/html5/html5_new_elements.asp but this won't work with older browser without some kind of javascript to fix things. For example http://remysharp.com/2009/01/07/html5-enabling-script/
However, if you really want to add new tags, it is possible to do so and then "modify" them via javascript to known tags (actually it's what the html5 enabling script of IE do), but it won't be possible to apply CSS easily to the new tags.
In short, I strongly advise against adding new tags. It's not that hard to understand something like <div class="answer">.
sounds like you want to write XML and convert to HTML using XSLT. This is an old tutorial (includes defining an DTD), but a further web search will garner more results that might suit
here you go fella:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
You need to use createElement :)
Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.
But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?
Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pages will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.
not exactly that, but there is a firebug plugin that does that for any loaded page:
http://robertnyman.com/firefinder/
You could use regular expressions ..
for example in Dreamweaver on the search dialog box :
select 'Find in: Entire current local site.."
select 'Search: Source code'
check 'Use regular expression'
in the find textarea type class\s*?=\s*?".*?content.*?"
click 'find all'
the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)
Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..
If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.
To show elements on the html page styled by a given selector:
(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);
(ii) click the X-Ray button off (must read 'Not Active' below the button);
(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);
(iv) now click 'inspector' on the mark-up page (next to 'X-ray').
Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.
For this kind of things I just use grep, or - even better, ack.
If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)
How about putting an ID on the body of each page, and use that to restrain the use of CSS outside of pages clearly stated in the CSS?
Like this:
#mypage .description,
#myotherpage . description {
}
Cons:
Must put a body ID on each page / template.
Must specify each page the CSS should apply to. More CSS code to manage.
Makes the CSS less easy to scan through with your eyes (since the line starts with the page ID and not the CSS style). This is a bigger problem if some of the CSS styles are used on several pages (since the css spec for each style would be long).
Pros:
Avoids unintentioned CSS change propagations. I.e. changing one page affects other unknown pages.
See what pages a CSS change would affect, when you're editing the CSS style itself. The information is right there; no need to search/grep for it.
Forces developers to specify what pages the CSS would affect. If you'd just included this information as comments in your CSS, some person would inevitably forget to update the comment when the CSS is used on a new page.
I agree with this statement, made by a friend:
"Minimize CSS that is used several places. It's not like programming; it's better with a little duplicate CSS, than unmanageable CSS. (Pages like apple.com, has own stylesheets for
each page, and some global CSS.)"
- Olav Bjørkøy, original creator of the Blueprint CSS framework
I'd love your input on this, or if any of you have found a better way.