The <html>
and <body>
tags both come with some non-default behavior that you know from other tags.
Do not try to style html
or body
for positioning, width/heigth, or similar. Every browser has its own caveats and you can not test them all.
Generally speaking:
html
tag to define your page's default background color (because on short pages or large screens, your body
may not be as tall as the browser window).html
tag to define a base font-size
so you can use [rem
units](https://www.sitepoint.com/underst...All new browsers support the new object-fit
CSS property. It allows to specify how an element behaves within its parent element and is intended for images and videos. The most useful values are contain
(fit-in) and cover
(crop).
Unfortunately, IE does not support this yet. However, if you're already using lazysizes, you can use its object-fit polyfill!
In your Javascript manifest, require them like this:
#= require plugins/object-fit/ls.obj...
Say we want …
Gallery
that has a name and has_many :images
, which in turn have a captionEnter jQuery File Upload. It's a mature library that can do the job frontend-wise. On the server, we'll use Carrierwave, because it's capable of caching images.
(FYI, [here's how to do the u...
Sometimes you want to preload images that you will be using later. E.g. if hovering over a an area changes its background image, the new image should be preloaded. If you only load it once the user starts hovering, there will be a delay until the background image flips.
The attached article explains how to preload images with only CSS. No Javascript required.
The gist is:
.element:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
Spreewald gives you the <step> within <selector>
meta step that will constrain page inspection to a given scope.
Unfortunately, this does not work with RSS feeds, as they're XML documents and not valid when viewed from Capybara's internal browser (e.g. a <link>
tag cannot have content in HTML).
If you're inspecting XML that is invalid in HTML, you need to inspect the page source instead of the DOM. You may use Spreewald's "... in the HTML" meta step, or add this proxy step fo...
Let's say you want to find the element with the text hello
in the following DOM tree:
<html>
<body>
<article>
<strong>hello</strong>
<strong>world</strong>
</article>
</body>
</html>
You might think of using jQuery's :contains
selector:
$(":contains('hello')")
Unfortunately that returns a lot more elements than you expect:
[ <html>...<html>,
<body>...</body>,
<article>...</article>,
<strong>hello</strong> ]
The reason for this is that...
Imagine you have a list you want to render inline on large screens, but stacked on small screens.
<ul>
<li>high</li>
<li>medium</li>
<li>low</li>
</ul>
ul { white-space: nowrap } /* optional: keep items in one line no matter the available width */
li { display: inline-block }
@media (max-width: 600px) {
li { display: block }
}
Now imagine you want the rightmost item to be the topmost item on small screens. You'll need to invert the order of list items, but only for large screens. Here are some approaches to do so:...
See attached link. The gist is:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Works in all web browsers and IE9+.
Until recently, you could open a new tab via window.open
when using execute_script
in Selenium tests. It no longer works in Chrome (will show a "popup blocked" notification).
This is because browsers usually block window.open
unless the user interacted with an element for security reasons. I am not sure why it did work via Selenium before.
Here is an approach that will insert a link into the page, and have Selenium click it:
path = "/your/path/here"
id = "helper_#{SecureRandom.hex(8)}"
execute_script <<-JAVASCRIPT
...
CSS4 comes with :has
. E.g. h1:has(b)
would select all <h1>
tags that contain a <b>
tag.
This is implemented in no browser but the jQuery query engine already supports it as a custom extension.
Spreewald 1.4.0 comes with this step:
When I click on the element ".sidebar"
We recommend to define a selector_for
method in features/support/selectors.rb
so you can refer to the selector in plain English:
When I click on the element for the sidebar
Spreewald 1.3.0 comes with these steps:
Then I should see an element ".panel"
Then I should not see an element ".sidebar"
Then I should see an element ".twitter-timeline"
We recommend to define a selector_for
method in features/support/selectors.rb
so you can refer to the selector in plain English:
Then I should see an element for a panel
Then I should not see an element for the sidebar
Then I should see an element for the Twitter timeline
Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.
If you need to install any of the widely-supported fonts listed there, you'll probably find them at www.fontpalace.com.
Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.
Free Bootstrap theme resembling Material Design.
Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application.
Implements only Bootstrap features which means that some Material stuff is missing, but also that you can easily use or replace the theme.
Does not come with extra JavaScript; some effects like button click ripples are implemented via CSS.
Also check out their other themes which can be used in a similar fashion.
CTRL + SHIFT + ALT + N
: Search for any symbol in your application, like CSS classes, Ruby classes, methods, helpers etc.
CTRL + SHIFT + N
: Search for filename in your application (also dependencies)
CTRL + E
: Open a list of recently opened files
ALT + POS1
: Open a the navigation bar as a context menu. Allows you to quickly navigate between files.
CTRL + SHIFT + A
: Find and execute a menu actio...