We Keep Coding

Is a sticky header possible in AMP?

So far I haven't found a solid way to create a sticky header on AMP pages. I know there are CSS workaround/hacks, but nothing I can use in a production environment. A simple "position:fixed;" unfortunately won't work in my case.
Out of all the components, I thought there would be one that toggles a body class on scroll, but I haven't found anything yet. Also don't think "amp-position-observer" will be of any use.
Am I missing something? Ideally I'd like to be able to toggle an element's class name after a scroll of X amount of pixels. Is this possible in AMP?

Toggling an element's classname after a scroll of X amount of pixels is currently not supported as amp-position-observer does not allow changing amp-state.
You can combine amp-position-observer to change parts of the header using amp-animation. However, it's application is limited as the supported CSS properties are limited. Nevertheless, with a little bit of creativity this approach can be quite flexible. One possible pattern is to duplicate elements in your header which are then shown/hidden based on your scrolling position.
Here is a sample highlighting the header based on the currently focused section.

I built a working solution of a sticky header within an amp-list. The pitfall is that amp elements add display: block and position: absolute on many elements.
To use position: sticky you need to use display: inline and position: relative on all subelements on your header. Make sure these are actually applied and not overwritten, use id to get a higher specificity over the amp css classes.
Here's an example using an amp list
css:
All divs need display: inline
The amp-list gets an id (not class) to apply css to itself and the generated child div
Divs can be nested as long as they use display: inline
.sticky {
position: sticky;
z-index: 1;
display: inline-block;
box-sizing: border-box;
width: 100%;
background-color:white;
top: 40px;
}
.inline {
display: inline;
}
#list-wrapper, #list-wrapper>div {
display: inline;
position: relative;
}
<div>
<amp-list [src]="..." items="." single-item layout="flex-item" id="list-wrapper">
<template type="amp-mustache">
<div class="inline">
<span class="sticky">
<span>Sticky header</span>
</span>
</div>
</template>
</amp-list>
<div>Your content</div>
<div>

Add more elements in CSS style

I am trying to develop something where I need this requirement, I tried a couple of things, but not able to do it.
There is one style - A:
.someClass {
padding-right:10px;
}
now I want to add margin also in same class like - B:
.someClass {
margin-left:10px;
}
Now I need both, padding and margin. The thing is I can't modify A as it set by some third party JS, which doesn't reside locally.
So, is there any way I can achieve this by Pure CSS or JS (NO Jquery)

There is one style - A:
.someClass {
padding-right: 10px;
}
No, that is not a "style". That is a "rule". It says to apply padding-right to elements with the someClass class.
Now you add another rule:
.someClass {
margin-left: 10px;
}
That says to apply margin-left to elements with the someClass class.
Together the two rules do exactly what you want. The key point is that CSS will apply all rules whose "selectors" (here, the .someClass part) match the element in question. If the two rules contain the same properties, then there are ways (involving concepts such as "precedence" and "specificity") in which CSS will choose which one to apply, but that is not the case here, so both padding-right and margin-left will be applied to elements with the someClass class.

You can put both margin and padding into the element at once:
.someClass{
margin: 10px;
padding: 10px;
}
Also if the margin or anything else is set by like you said third party JS you can Override it in CSS by adding: !important so your code would look like this:
.someClass{
margin: 10px !important;
padding: 10px !important;
}
According to your question you need only padding to override.
Hope i understood your Question and could help.

why visibility is always setted to visible although in CSS is hidden?

I am using ShadowBox for showing media. It has some property showOverlay, which i setted to false, because dont need it.
Problem is that background is not accesible as if ShadowBox is modal dialog although Visibility in CSS is setted as hidden.
In Chrome and Mozilla it will be changed to visible and is modal. It works manually if me changing it back again to hidden.
BUT WHY it is always setted to visible in Chrome and Mozilla browsers sourcepage/css????
Here are my CSS of ShadowBox:
#sb-container {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 999;
text-align: left;
visibility: hidden;
display: block;
}
#sb-overlay {
position: relative;
height: 100%;
width: 100%;
visibility:hidden;
}
#sb-wrapper {
position: absolute;
visibility: hidden;
width: 100px;
}
and it is what Chrome and Mozilla does! in Explorer it works!

Inline styles (the ones on element.style) have a greater "priority" over CSS styles defined in a stylesheet.
What you can do:
It's a good advice to actually avoid inline styles if possible. Style your elements with the least specificity at best. That way, they're easily overridable later on.
Note that changing styles via JS (someElement.style.someStyleHere) counts as an inline style as well.
If you are changing styles dynamically, it is better to define the styles in CSS classes, and use JS to dynamically add or remove these classes on the target elements.
If you are familiar with jQuery, the addClass and removeClass are the functions I'm referencing. Of course, you can come up with your own function that parses the element's className, and add or remove the said classes.
If avoiding inline styles isn't an option (due to some framework you use that does it that way), you can override inline styles by placing !important on your styles defined in your stylesheet. It's a bit rash, and usually used as a last resort to overthrow inline styles.

Based on your screenshot it appears that visiblity: visible is set as a style inside the style attribute on the element. The style attribute always overrides what is inside any stylesheets.

try using visibility: hidden !important;

This is a very simple and interesting concept in CSS called CSS Specificity
It defines to the browser which CSS rule to be applied in case of overriding of rules.
In your case, you have applied inline CSS style to your html elements. Since it has the highest priority, whatever your write in your external .css file will be ignored.
To avoid this, remove all inline css from your html code and try to incorporate them in the external css file you having. OR as many people already suggested, you can use the "!important" to your greatest advantage.
Hope this clears out the problem.

remove / reset inherited css from an element [duplicate]

This question already has answers here:
How to reset/remove CSS styles for a specific element or selector only
(17 answers)
Closed last month.
I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.
I'm building and embedded script that people can put it on their sites. This script creates a div with a certain width/height and some information in it.
My problem is that some websites declare styles for div that are inherited by my div as well.
for example:
div{
background-color:red;
}
so if I don't set any background color to my div, it will show red even if I don't want that.
The only solutions I come along is to overwrite as many css proprieties, this way my div will show exactly as I want.
The problem with this solution is that there are too many css proprieties to overwrite and I want my script to be as light as it can be.
So my question is if you know another solution to my problem.
It can be in css/javascript /jQuery.
Thanks

"Resetting" styles for a specific element isn't possible, you'll have to overwrite all styles you don't want/need. If you do this with CSS directly or using JQuery to apply the styles (depends on what's easier for you, but I wouldn't recommend using JavaScript/JQuery for this, as it's completely unnecessary).
If your div is some kind of "widget" that can be included into other sites, you could try to wrap it into an iframe. This will "reset" the styles, because its content is another document, but maybe this affects how your widget works (or maybe breaks it completely) so this might not be possible in your case.

Only set the relevant / important CSS properties.
Example (only change the attributes which may cause your div to look completely different):
background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;
Choose a very specific selector, such as div#donttouchme, <div id="donttouchme"></div>. Additionally, you can add `!important before every semicolon in the declaration. Your customers are deliberately trying to mess up your lay-out when this option fails.

You could try overwriting the CSS and use auto
I don't think this will work with color specifically, but I ran into an issue where i had a parent property such as
.parent {
left: 0px;
}
and then I was able to just define my child with something like
.child {
left: auto;
}
and it effectively "reset" the property.

Technically what you are looking for is the unset value in combination with the shorthand property all:
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.
.customClass {
/* specific attribute */
color: unset;
}
.otherClass{
/* unset all attributes */
all: unset;
/* then set own attributes */
color: red;
}
You can use the initial value as well, this will default to the initial browser value.
.otherClass{
/* unset all attributes */
all: initial;
/* then set own attributes */
color: red;
}
As an alternative:
If possible it is probably good practice to encapsulate the class or id in a kind of namespace:
.namespace .customClass{
color: red;
}
<div class="namespace">
<div class="customClass"></div>
</div>
because of the specificity of the selector this will only influence your own classes
It is easier to accomplish this in "preprocessor scripting languages" like SASS with nesting capabilities:
.namespace{
.customClass{
color: red
}
}

Try this: Create a plain div without any style or content outside of the red div. Now you can use a loop over all styles of the plain div and assign then to your inner div to reset all styles.
Of course this doesn't work if someone assigns styles to all divs (i.e. without using a class. CSS would be div { ... }).
The usual solution for problems like this is to give your div a distinct class. That way, web designers of the sites can adjust the styling of your div to fit into the rest of the design.

As long as they are attributes like classes and ids you can remove them by javascript/jQuery class modifiers.
document.getElementById("MyElement").className = "";
There is no way to remove specific tag CSS other than overriding them (or using another element).

you may use this below option.
<style>
div:not(.no_common_style){
background-color:red;
}
</style>
now , if their any place where you do not want to apply default style you can use 'no_common_style' class as class.
ex:
<div class="no_common_style">
It will not display in red
</div>

From what I understand you want to use a div that inherits from no class but yours. As mentioned in the previous reply you cannot completely reset a div inheritance. However, what worked for me with that issue was to use another element - one that is not frequent and certainly not used in the current html page. A good example, is to use instead of then customize it to look just like your ideal would.
area { background-color : red; }

One simple approach would be to use the !important modifier in css, but this can be overridden in the same way from users.
Maybe a solution can be achieved with jquery by traversing the entire DOM to find your (re)defined classes and removing / forcing css styles.

Changing the position of a li element with a given class inside an ul?

I have a ul with several li elements, one of them will always have the class "active". How can I make the li.active element to always appear on top of the list?
I cant't control the html output that produces this list, so I would have to do this with css (preferably) or javascript/jquery.
I guess there is not a way to do this with css, but it would be great to have some kind of position-in-list property.
Thanks a lot!

If we assume the height of the list items is going to be constant (and that is a pretty big assumption):
ul {
position: relative;
padding-top: 2em;
}
li {
height: 2em;
}
li.active {
position: absolute;
top: 0;
left: 0;
}

If (and I think you do) you need to manipulate a list item's actual order, as you're guessing, CSS alone won't cut it. You're tagging this post with 'jquery' so I guess you know about that library's selectors and so on. Surely you just need to (a) select the li element with the class "active" and then (b) insert said item at the top of the unordered list? This is perfectly do-able in jQuery. Here's a (VERY) simple way of doing it:
$('ul').prepend($('.active'));
All this does is grab the first element on the page with the class 'active' and prepends it to the first unordered list. This is probably too simplistic for your needs, but hopefully it will help you find a more robust solution.