allthingssmitty / css-protips Goto Github PK

Wouldn't this mean that "anything" that's after anything gets a margin on top? The opposite of precede — original reference document uses "proceed."

Suggested edit.

In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em.

using negative margins to get rid of :first-child and :last-child selector

instead of this

.navigation li {
  display: inline-block;
  margin: 0 .5rem;
}

.navigation li:first-child {
  margin-left: 0;
}

.navigation li:last-child {
  margin-right: 0;
}

you could write

.navigation {
  margin: 0 -.5rem;
}

.navigation li {
  display: inline-block;
  margin: 0 .5rem;
}

It is similar to the flexbox space-betweet technique but flexbox does not work in every situation.

If you agree with me, I could send you a PR :)

Use rem for Global Sizing; Use em for Local Sizing -> YES!

But… html { font-size: 16px; } -> pleaaaase noooo! :-/

https://nicolas-hoizey.com/2016/03/people-don-t-change-the-default-16px-font-size-in-their-browser.html

https://github.com/AllThingsSmitty/css-protips#comma-separated-lists

Make list items look like a real, comma-separated list:

Looks fine for viewing but if the page is scraped or being looked at by a screen reader these will be missed.

Hello Mate,

I have noticed you have a wide variety of languages. I am going to add Polish into it and send you the results.

Thank you
Justin Oliver

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

OS X has an option to disable "LCD font smoothing" in System Preferences, so those who don't like it can do so. But it doesn't have an option to force sharp text rendering on pages that chose to make it blurry.

Please don't recommend setting these properties on html. They do help to make icon fonts less wonky and for some fonts rendered in white-on-black, but in disabling it everywhere for everyone is IMHO too drastic.

Use a global selector within an element to create a consistent vertical rhythm.

article > * {
  margin-bottom: 1.25rem;
}

Using flex to do layout is pretty cool, but as the content goes more, there may be something wrong, for example, if I paste the h1 tag in your demo for 10 times, the document will only show it 9 times though there is a scroll bar, and if i decrease the browser's height, there will be more to lose, how could i solve this problem gracefully?

I noticed that you wrote last sentence in German language in the repo (on English):

Hier definiert der CSS-Selektor die Grenze so, wie ein Mensch sie beschreiben würde.

https://github.com/AllThingsSmitty/css-protips#use-not-to-applyunapply-borders-on-navigation

使用 “形似猫头鹰” 的选择器这个模块demo链接出错了，翻译的时候搞错了吧，原文是正确的，原文demo链接是这个，翻译的链接是这个

I think this repo must contain the aspect ratio hack...It can be use widely in hero section , responsive styling and grid based content....
Here is more info about the aspect ratio hack
please do let me know if its best fit for the repo and if yes I would like to send a PR for this

You can use attribute selectors to display the link when the a-tag is empty but the href-tag is an link.

Example:
html:

<a href="http://google.de"></a>
<a href=""></a>
<a href="http://bing.com">Test 1</a>
<a href="#">Test2</a>

css:

a[href^=http]:empty::before {
    content: attr(href);
}

Include same translation links at the bottom of the master README on all README files.

http://alistapart.com/article/axiomatic-css-and-lobotomized-owls

we adopt the aforementioned universal selector, creating our owl face. The axiom is as follows: “All elements in the flow of the document that proceed other elements must receive a top margin of one line."

* + * {
    margin-top: 1.5em;
}

The transition property is detailing how long it will take to reach the max-height value. In your example it would take 0.3 seconds to reach 1000px. If the element's height is much smaller, like 200px, the animation will be so quick you won't notice it and might as well not be using the transition property. I can show you live examples if necessary.

A good looking alternative I found for text-decoration: underline; is using border-bottom instead, it gives you more control over the way it looks.
For example: border-bottom: 1px solid black; or:
http://codepen.io/pugsiman/pen/vNKBPe

At some point a table of contents will likely be needed to make it easier to parse through tips.

I see some projects using :root but I not have any idea about good practices about it. Have any tip for us?

line-height: 1.5;

There is some alternative approach In the section about :not() CSS pseudo-class :
Use :not() to Apply/Unapply Borders on Navigation

Sure, you can use .nav li + li, but with :not() the intent is very clear and the CSS selector defines the border the way a human would describe it.

I think this adjacent sibling combinator has a different meaning(inner logic) rather than :not() CSS pseudo-class. Of course in the context of the Borders on Navigation.
What I mean?

If we apply adjacent sibling combinator:

.nav li + li {
  border-right: 1px solid #666;
}

We will have border-right on the li elements except the first one. example pen

But with :not() pseudo-class we will have right behaviour:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Question: Can we replace pseudo-class with adjacent sibling combinator? Or there's some error here? Or I didn't catch intent of this CSS tip?

这个功能有demo演示吗？

At https://github.com/AllThingsSmitty/css-protips#use-unset-instead-of-resetting-all-properties, it says "the all shorthand isn't supported in IE11 and is currently under consideration for support in Edge"

It looks like Edge now supports the all keyword, probably because it's now based on Chromium 🙂

Source: https://caniuse.com/css-all

I personally use this technique in professional projects

.nav li + li {
  border-right: 1px solid #666;
}

this technique has less specificity and support IE7. Thought?

Is there a reason the html rule comes before the ***, :before, :after rule instead of after it?

Also, I thought that it was considered bad practice to use the universal selector?

@Unruly-MAC I was looking over the merged file for the German translation and there are some formatting issues. It looks like the table of contents hasn't been formatted correctly, and links and code snippets aren't in the proper format either. Can you look into that?

Hi,

Please can I add an animation on load, which can be added to any element via. a class.

@Keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

.animation-element-onload {
animation: 1s ease-out 0s 1 slideInFromLeft;
}

Thank you,
Gemma

html {
font-size: 14px;
}
p {
font-size: 1rem;
}

Nice list!

With some tweaks all these tips work also with IE10, which still has large enough market share to care.

However, with IE10 flexbox centering fails when using min-height instead of height, see https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items

line-height to body

body {
  line-height: 1;
}

The above value is too small and will create problems with descenders/ascenders. I think it'd be better to use a more realistic one (i.e. 1.5) so people who copy/paste won't find out the hard way.

Use :root for Flexible Type

It is better to use unit-less values with line-height because the way inheritance works with this property (what is inherited is a computed value).

So I'd suggest to use:

body {
  font: 1em/1.6rem sans-serif;
}

/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: none; //should be written as display: block;
}

You should add a tip for a simple wrapper/container utility. For example:

.wrapper {
  margin-right: auto;
  margin-left:  auto;
  max-width: 960px;
  padding-right: 10px;
  padding-left:  10px;
}

It's explained more in this css-tricks article.

I'd be happy to add it if you want.

Hi. Could someone create an awesome list with CSS snippets specialized in epubs?

I'm setting up this card as a way to track PR's for language translations. If you're translating this repo please add a comment indicating which language so we're not duplicating work. 😎

Your PR should include the following:

1. Add a language/country code folder to the translations folder, e.g., translations/fr-FR
2. Add a README.md file with the translation to the language/country code folder, e.g., .../fr-FR/README.md

You can find more information about contributing under the Language Translations section of the Contribution Guidelines.

I'm not looking for pasting into Google Translate; I can do that myself and it's not accurate. 💁🏼 I appreciate your help with this. 👍🏼

Translations (and any others that may not be on this list):

• Chinese - simplified (zh-CN)
• Chinese - traditional (zh-TW)
• French (fr-FR)
• German (de-DE)
• Greek (gr-GR)
• Gujarati (gu-GU)
• Italian (it-IT)
• Japanese (ja-JP)
• Korean (ko-KR)
• Polish (pl-PL)
• Portuguese - Brazilian (pt-BR)
• Portuguese - European (pt-PT)
• Russian (ru-RU)
• Spanish (es-ES)
• Vietnamese (vn-VN)

you can also do

.nav li + li {
border-left: 1px solid #666;
}

Sorry i tried commenting in the Translations section and i ended up makeing a new issue and i dont know how to delete it 😄

Not an issue, just a suggestion.
Since you're already using :not() on two of those pro tips, I'd suggest to use it on another one:

The Select Items Using Negative nth-child:

li {
    display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
    display: block;
}

Could be just:

/* select items 1 through 3 and display them */
li:not(:nth-child(-n+3)) {
    display: none;
}

Thanks for sharing those!

You should probably add a note to use optimizeLegibility selectively, rather than blindly applying it to everything. Otherwise, it has performance implications: https://bocoup.com/weblog/text-rendering/

You should add a tip on little known (or remembered) CSS Counters i believe.

It is supported on all major platforms, http://caniuse.com/#feat=css-counters

Here is an example: http://codepen.io/Monochrome/pen/bEMbdr

I don't think the :not tip should be advised. You're adding 1 more level specificity to all of nav items except the last one as opposed to that 1 level to just the last one. Makes it a bit more annoying to overwrite when it comes to it.

Use the "Lobotomized Owl" Selector and Consistent Vertical Rhythm are basically the same protip.

By applying the LobOwl selector you get a consistent vertical rhythm and the benefit of no left over margins at the top or bottom of the containing element.

With the example presented for Consistent Vertical Rhythm, some margin will be leftover on the last element (unless using the :not trick of course).

I suggest the Consistent Vertical Rhythm tip be removed and a little more explanation added to the LobOwl tip.

This looks like a good addition for https://github.com/sindresorhus/awesome.

Would you be interested in submitting it there? See: https://github.com/sindresorhus/awesome/blob/master/create-list.md

Related to #32, CSS-generated content isn't part of the selection. So when copy/pasting result might differ from what is displayed on the page.

Example: http://codepen.io/edouard-lopez/pen/VeoRre

One can't reproduce the subj because of lack of styles. Can You post codepen example, please?

Align the flex items at the centre of the container.

div { display: flex; justify-content: center; }
This is the quick and easy way to get your divs aligned.

You suggest to use a[href]:not([class]) for a-Tags without an href-attribute. But why?
a is everything you need to style for this case. Heck, you can use a:link, a:visited if that floats your boat but adding two different type of selectors ([attribute], :not()) is in no way a pro tip.

Same outcome for all of these solutions but less code and better browser support (IE7+ instead of IE9+)

.nav li + li {
  border-left: 1px solid #666;
}