I'm attempting to make a simple blog style website using one XML, one XSLT, and one CSS.
For that I'd like to have the option to only view one entry from the xml, and I would like to do it without javascript or php.
I'm trying to do this using the :target selector.
The behaviour I would like to achieve would be;
index.html should show everything
index.html#one should only show the entry with id="one"
index.html#two should only show the entry with id="two"
and so on.
I've found solutions that will display the last sibling, however that doesn't fit. My xslt turns entries into tables, and I can't see how I dynamically could parse the xml to fit that solution.
Is there a way to do this with css, or should I start learning php?
this should be an either/or proposition ... learn PHP. it will benefit you.
but for a CSS-only solution (with a little .htaccess magic) you could do a rewrite of index.html to index.html#all, set your wrapping div to have ID of all (or whatever your wrapper ID is), then set the :target CSS for #all to show everything.
#all .YouWantToHide {
display:none;
}
#all:target .YouWantToHide, #one:target, #two:target {
display:block;
}
This will hide everything by default on the normal page (which will never be visited, it just sets the tone for the specific items to show and other to hide later), show on the #all target (which is now the default page), and the specific items will show as needed while the others will hide.
Related
Normally I can get around the fact xpages hijacks the id-attribute on fields etc by using the x$ jQuery selector...
However, I'm building a sylesheet using the #print media query to make a normal form into a pretty version when printed. I have a scenario, where I have a custom control, have given it an ID of GuidanceArea, and under normal circumstances would be able to reference it in my style sheet with #GuidanceArea, just to simply hide it for example for this scenario.
However this isn't working, I assume because of the ID hijacking? It's not too much of a big deal, as I have workaround where for all elements I don't want to print I just append no-print to the elements styleClass and have .no-print set to display:none in my #media print within the style sheet.
However out of curiosity more than anything, I wondered if there's an easy way to get a hold of an elements ID for use in CSS?
The short answer: don't
The longs answer: JSF and XPages manage the id attribute to ensure it is unique on a page. So you don't have actual knowledge what it will be.
The easiest way is to use the class attribute to mark the element of interest, so your selector would be .someclass instead of #someid
But if you absolutely have to: use an XPages output element to send a piece of computed inline css where you use expression language to obtain the actual id. Browsers or libraries might cough on the : in the id, so your result requires lots of testing. VanillaJS should work.
I've just started my first project which is building an admin panel. My task is to create HTML and CSS - sort of a base of design to process further to the back-end developers.
I was asked to keep CSS simple and classes as descriptive as possible ( could be long ) and to use Bootstrap.
To avoid creating unnecessary classes which could be used once or twice I decided to go with :nth-child since I thought giving new class to each column is too much. Additionally I created few base classes that might be used for adding 0px padding and margin.
Unfortunately, as I was writing more and more code I've noticed that some CSS code looks like this:
.print-history-advanced-search > [class*='col-']:nth-child(5) > .form-group > .form-horizontal > .form-group > [class*='col-']:first-child
And it is not a single line.
Additionally, I've noticed that sometimes that when I am making a new class and it has lots of parent elements, I cannot write the CSS selector by its own, but I need to state the parents of the this particular element and put the class at the end, which does not make sense.
Is there any solution I could use to avoid creating classes that are simply used in one or two divs, but also make the CSS code less chaotic and avoid very long names? Or maybe I should just give up on children and nesting and work with just classes?
Thank you for your help!
Have a nice day!
If you want to write good CSS, then I'd suggest the BEM model is a good route to go down.
The essentials are;
No element/selector heirachy
No use of elements in selectors
Class based styles only
BEM stands for Block, Element, Modifier - which is how your class names are formed. Borrowing an example from their site;
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>
You can see there's a form Block, and then a form__input and form__submit Element, and then a form__submit--disabled Modifier.
Depending on your needs I would recommend using css preprocessors like SASS,LESS.
You’ll find that as a website grows, you’ll develop a pretty long, scrolling list of various elements and CSS rules. Some of the rules might overlap or override each other eventually (in that case, usually the more specific rule will win).
You can end up with a lot more code than you expected, especially considering the different variations of a rule you need for different browsers and screen sizes.
There are many ways to refactor your CSS code to make it easier to navigate and use. Some of the easiest methods are the most effective and have the most mileage. Here are some of the quickest ones:
Keep your spacing uniform: Maintain the same spacing between rules
and within declarations throughout your file so that it’s easier to
read.
Use semantic or “familiar” class/id names: Instead of using a class
name like “bottom_menu”, try using the semantic tag “footer”. Or
when you have an image in your “contact” section, make sure you’re
using a class on your image like “contact_image”
Keep it DRY (Don’t Repeat Yourself): Ideally you want to repeat as
little of your code as possible. Do you find the declaration
“background-color: #000″ repeated throughout your CSS file? Consider
typing it once and instead, using multiple selectors on the one
declaration.
Put your tidiness to the test with these tools: Run your CSS through
CSS Lint or W3C—these will help to parse your CSS file correctly,
and highlight problem areas. Your web browser’s developer tools are
also extremely useful for pinpointing specific elements on your
website and using the area as a sandbox to experiment with different
styles and positioning.
Have a look here for more info
My goals:
Generate a single HTML document with all my output so that it can be copied as a single unit.
Have multiple "pages" within that document that display different parts of the data.
Let the browser's back button do the Right Thing, and support deep-linking.
This is relatively easy to do using the :target pseudo-class to show only the page that I'm looking at (div {display: none} :target {display: block}).
I would like to add two refinements:
A navigation bar that highlights the current page's name.
A main page that appears when there is no fragment identifier (the thing after the #) in the URL.
I have created a solution using empty divs and sibling selectors. The target element (the element whose ID is in the URL fragment identifier) is an empty div, target, and then my CSS says #target1 ~ #page1 { ... } #target1 ~ #link1 { ... }. For a full example see this Fiddle; note that after clicking on the links in the nav bar, the back and forwards browser buttons work as one might reasonably expect (I don't think it's possible to demonstrate deep-linking using jsfiddle).
There are three drawbacks to this solution:
There is a separate selector in my CSS for each page, which can become unwieldy if there are many pages.
The back button works on Chrome and Firefox, but Edge doesn't seem to like this (I haven't tested it anywhere else). My understanding is that the spec is unclear regarding :target and the back button (see also this Webkit bug).
As the question's title says, it feels like I'm abusing... something.
My question is, is there a better way to do what I'm trying to do? I have a slight preference for no JavaScript (mainly because that makes deep-linking more obviously correct).
#Seika85 linked (in a comment) to Navigo, a Javascript router that seems built to do exactly this. I have updated the fiddle to use that instead, which eliminates all the drawbacks I mentioned, at the (minor) expense of having to use (a small bit of) Javascript. Thanks!
new Navigo(null, false)
.on(/target(.)/, function(x) {
$('.active').removeClass('active');
$('#page'+x).addClass('active');
$('#link'+x).addClass('active');
})
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
I built an extension which, whenever user visits some specific sites, I inject my script on the top of there web pages. I used
document.body.insertBefore(wrapperDiv, document.body.firstChild)
to do so.
Now problem: CSS of injected script gets messed up for each and every site(differ from one site to another).
How should I maintain single css structure for all sites?
You should be able to solve this problem by using unique IDs for your html tags with CSS.
That is, if your DIV CSS properties are interfering with their DIV CSS add a #uniqueNameHere ID to your DIV and set the CSS for the #ID.
This page on the use of the !important keyword may be useful too.
http://css-tricks.com/9462-when-using-important-is-the-right-choice/
Use unique selectors for your elements (be it classes with specific prefix or similarly constructed IDs), but you probably try to include CSS along with your script, which may not be a good idea.
In some cases the inline styling is the best idea - it will overwrite all the styles for your elements and will make sure the outlook of these elements is consistent across different pages.
So, I would say, go with inline styling.
For documentation on how the styles are overwritten in CSS 2.1, please see the following page: http://www.w3.org/TR/CSS21/cascade.html#specificity