The idea of ​​building bookmarks with CSS alone has been floating around in the web design environment for a long time. However, among the many implementations, very few correspond to the functionality that is expected from bookmarks. Typically, the user hopes that by clicking on a bookmark, they will see the new content without reloading the page.

Since 2008, there have been various attempts to implement bookmarking functionality in pure CSS without the involvement of JavaScript. One direction is based on the use of the :target pseudo-class. Another direction is based on a pseudo-class: checked for radio buttons and related combinators.

The second direction showed much better results, except for working with browsers of the WebKit family, which did not allow pseudo-class selectors and adjacent combinators to work together. But in Safari 5.1 and Chrome 13, the bug is finally fixed!

And now you can implement bookmarks using the :checked pseudo-class, which will probably be the main method for solving this problem for several years.

HTML

Container for the whole group. Each bookmark div contains a radio button (to form the functionality), a label (to name the bookmark), and the content of the bookmark:

css

1. Hides the radio button (it doesn't need to be shown, we only need it for the checked/unchecked state).
2. We make bookmarks floating blocks so that the labels line up on one line.
3. Absolutely position the content areas one on top of the other.
4. When the radio button has a :checked state, rearrange the corresponding content area to the top using the z-index property (visually it will appear hiding other content areas).

Tabs ( position: relative; min-height: 200px; clear: both; margin: 25px 0; ) .tab ( float: left; ) .tab label ( background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; ) .tab ( display: none; ) .content ( position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0 ; padding: 20px; border: 1px solid #ccc; ) :checked ~ label ( background: white; border-bottom: 1px solid white; z-index: 2; ) :checked ~ label ~ .content ( z-index: 1 ; )

Very small CSS code that easily scales to any number of tabs (you just need to add div elements with the class tab to the HTML code).

JavaScript

Absent completely.

What is the benefit of this method?

• Availability. The radio buttons are hidden with the display: none property, so screen readers won't see them and get confused. And the content does not use display: none; and remains available.
• Works in Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, and IE 9+.

Everyone who uses the Internet, one way or another, stores links to previously viewed pages with interesting information, or, in other words, bookmarks, favorites, favorites - the name depends on the browser used, the imagination of the translator, and, in part, the developer. Once upon a time, in the mid-90s, many of us started using the Internet using only one available device - a computer at work. By the end of the 90s, a fairly large number of people began to indulge in home Internet. There were two devices - a computer at work and at home. I don’t know about you, but even then I had a question: how to look at home those links that I saved at work, or vice versa?

No matter how many tricks I resorted to. For example, I made the "Work" and "Home" folders in the browser bookmark tree on my home and work computers. Yes, yes, two folders in the home and work browser. All bookmarks created on the home computer, I placed in the "Home" folder, all created at the workplace - in the "Work" folder. Then everything happened like this: in the morning, getting ready for work, I exported the "Home" folder, saved the resulting file to a USB flash drive. Arriving at work, I deleted the old "Home" folder in the bookmark tree of the working browser, after which I imported it from the USB flash drive new version. It's not hard to guess what I did when I went home.

Another scenario involved forwarding links via e-mail. I copied the addresses of the resources I was interested in into the text of the letter, sent it to my postal address, for example, Hotmail, then opened the received letter, followed the links, memorized them if I considered it necessary. Later, this script was slightly modernized: instead of sending letters, I created a draft in Gmail, then - without changes.

I must say that my choice in the world of browsers, almost from the moment of its appearance, was the Opera browser. What can we hide, it’s sinful, when it was not free, I used various methods to bypass protection. But, if in those distant times, it would have been possible to simply, without headaches, pay for your favorite browser, I probably would have done so. But then I didn’t have any cards, or any other opportunities ... Well, I probably justified myself. Let's get back to this wonderful browser itself. He did not stand still, constantly evolving and acquiring additional features.

Version 9.5 introduced a new service called Opera Link. With its advent, it became possible to synchronize various information between browsers on various devices, including Opera mini. Bookmarks were one of the components of the synchronized data. Of course, I immediately registered in this service and began to use it. And I used it successfully, happily ever after, until ... Until Opera announced that it was switching from its Presto engine to another well-known engine - WebKit.

Maybe this news seemed good to someone, but I realized that the world of Opera will no longer be the same. And indeed, Opera's branded "features" began to disappear. In fact, "started" is not quite the right word, it was much worse - with the release of version 15.0, everything just became different. Along with other usefulness, bookmark synchronization has also disappeared. It is because of this radical change of course that versions of Opera, starting with the fifteenth, have not taken root with me. On large, let's call them that, devices, that is, desktops, laptops and netbooks, I continue to use the latest "native" version - 12.17, especially since, fortunately, Opera Link, as a service, has not been closed and continues to function in this old version browser. In fairness, I note that the developers of Opera promise to return synchronization to their browser. But when this will happen, and how it will be possible to use it again - at least I do not know.

But life does not stand still. Now, in addition to "large" devices, I have a certain amount of"small" devices - tablets and smartphones, mostly on Android, but there are also under Windows 8.1. And it's just not possible to use old versions of Opera on everyone. So, on an Acer tablet, with Windows 8.1 on board, when working in finger-based input mode, I use Internet Explorer, and on an Android tablet I often use Chrome. At work, since I spend most of my time programming on a portable virtual machine, I have to be content with FireFox, since Chrome is cut by a corporate proxy, Opera fails (or maybe just too lazy?) to set everything up so that everything works, and the donkey on XP (namely, under this operating system, virtual machines work for me) to new versions is not updated fundamentally. And how do you order to synchronize bookmarks with such a zoo? But there are about two and a half thousand of them in Opera Link!

In fact, the question asked in the penultimate sentence of the previous paragraph did not arise now and I am not its author. I just happily bypass it, limiting myself to using one browser. Sooner or later, this limit would become too expensive and the issue would require its solution.

What are the ways to solve the described problem - the ability to work with bookmarks from various browsers on various platforms. It is clear that decisions like "I will now use Chrome" are something from the category of changing the awl for soap. Of course, Google is bigger than Opera, and Chrome is somewhat more popular than the Norwegian browser, but... There are always some "buts" that are rather difficult to explain and describe.

In general, I decided to find some cloud bookmark storage service. It is desirable that it was not very difficult to use, and, if possible, free. In fact, because Opera Link, in essence, is a free cloud service, but to use it in this capacity, for me personally, it seemed very inconvenient.

After some time spent on the Internet exploring alternatives, the list of services that meet my requirements has been reduced to two. (To be completely honest, up to three, but this third, pinboard , does not meet the criterion for free). So, this is Google Bookmarks from Google, of course, and Xmarks, now from LastPass.

Everyone remembers my weakness for Google products? I have such a shortcoming. I try to overcome it, but, to be honest, I'm always looking for some kind of loophole to reject competitors. And now, having gone to the Xmarks website, I found fault with the need to install additional software on all computers in order to synchronize bookmarks from browsers. In addition, in order to take advantage of this opportunity, mobile devices You need to buy a premium subscription. In principle, you can use online access, but why is it better than a product from Google? In general, the reason was found, although I registered with this service in order to later compare the convenience of online access to services.

Now let's talk about Google Bookmarks. This service has nothing to do with the bookmarks that Chrome saves when data is synchronized between browsers on different devices. In general, this is a rather strange feature, a little illogical, from my point of view. Moreover, in order to import bookmarks into the Google service, I had to go a long way, in which Chrome was not involved in any way. I will tell you a little about this path now.

First of all, we need to export bookmarks from Opera. This is not at all difficult to do, you just need to remember that you need to export to an HTML file. Why? Because you can only import bookmarks into Google Bookmarks using the Google Toolbar, and at the moment this tool exists up to date only for IE. And in the Microsoft browser, bookmarks can be imported from an HTML file. It's a good chain, isn't it?

All right, the file from Opera is received. On an HP laptop, with Windows 7 on board, I download Google Toolbar and I install it. In the same place, I launch Internet Explorer and import bookmarks from an HTML file. I check - here they are, my bookmarks, IE carefully created the Imported folder in Favorites and put them there neatly. Further, as the page with the help of importing bookmarks Google Toolbar warned me, I had to enable the display of the bookmark menu in the toolbar settings. So far, everything seems to be smooth and predictable. Did you feel uncomfortable? And right! The next step - choosing which bookmarks I want to import - took me much longer than expected. And that's why I started writing this post.

So what kind of problem arose on this ordinary, judging by the description, action? Yes, everything is simple: I could not find exactly those bookmarks that I imported. In IE I can see them perfectly, along with the old Explorer bookmarks, but not in the import selection list!

As an honest programmer, I assumed that there was a small mistake in IE or in the Google Toolbar, and decided that it could be corrected with simple actions, such as moving imported bookmarks from the Imported folder to the Favorites root, or simply reloading Explorer - you never know, why didn't they catch up. In total, these, and others invented in the course of experiments, simple steps, performed many times in different sequences, I spent probably about an hour. But nothing has changed - I just didn't see my imported bookmarks in the select list.

Then I did what I probably should have done from the very beginning, I began to look at the bookmarks using the file manager (fortunately, Explorer stores them as files in a special folder file system) more attentively. Have you ever played "find 10 differences in pictures" games? Something similar had to be done here. And I found!

Here it is, the difference!

Bookmark file extensions - native bookmarks have .url, imported ones have .URL. Everyone knows that (by default) in Windows, the case of letters in file names and extensions does not play a role, unlike the same Linux. That is, you cannot have files named MyBookmark.url, mybookmark.url and mybookmark.URL in the same folder - from the point of view of Windows, this will be the same file name, although, when creating a file, the case of letters is preserved exactly as it was set by the user.

Burdened with this knowledge, I wouldn't have made the difference if it hadn't been for the hour I spent mercilessly trying to get the Google Toolbar to see my imported bookmarks. But this hour changed me and I decided to rename the bookmark files, making their extensions in small letters.

In order to do this, I had to remember the cmd shell language. Where is it without Google. Pretty soon I found the command I needed. It remains only to slightly tweak the example and this is what happened as a result:

For /R %%d in (.) do (cd %%d && ren *.URL *.url)

If you make a batch file (with the cmd extension), then you just need to copy this line into it. If you run from command line, then instead of "%%" you need to use "%". I made a batch file and ran it from the Imported subdirectory of the Favorites directory. All files have been renamed. After that, I again turned to the Google toolbar to start importing bookmarks and this time I was rewarded - all imported bookmarks were in the list for selection. Naturally, I selected all, after which they were successfully imported into the Google Bookmarks service.

So, one, very big point of the program for mastering the cloud bookmark storage service, has been completed - the existing bookmarks have been imported successfully. Now it's up to you to learn how to use this service.

The first thing to do is learn how to add new bookmarks. Actually, it's not difficult. There is a bookmarklet on the Google Bookmarks help page that will solve this problem. The main thing here is to figure out how to add it to the corresponding bar of the desired browser. For desktop Chrome and Firefox, you can drag the link on the specified page to the bookmarks bar with the mouse. Of course, the panel must first be displayed in this very browser. AT Internet Explorer-e you can use the right mouse button by clicking it on the desired link, and then selecting in context menu item Add to favorites. But I will not repeat here what is very well described, for example,.

Well, adding bookmarks is now easy: when you are on the desired page, you press the bookmarklet button and a pop-up window opens on the screen, which indicates the name of the page, its address, and you can add labels (label) and / or notes. Interestingly, if a bookmark has already been created for this page, it will open for editing, which is also quite convenient.

The next task is to find the necessary bookmarks. When you open the Google Bookmarks page in your browser, a number of bookmarks and a long list of bookmarks in use appear on the screen. Displayed bookmarks can be sorted by date, title, and tags. Not simultaneously, but separately. In addition, by clicking on any of the labels, you can limit the displayed bookmarks to only those marked with this label. In addition, it is possible to search for bookmarks by the text included in the title, or by a combination of tags, tags, and title text. If you want to find, for example, all bookmarks marked with JavaFX and Threads tags, then in the search bar you need to type something like:

Label:JavaFX label:Threads

If you add some text without the label prefix to this line, separated by a space, you can also get a restriction on the text in the title:

Label:JavaFX label:Threads task

In general, the search is also more or less clear. Now it is necessary that some time pass and some experience of use accumulates. It is also interesting to try all this on mobile devices. With tablet under Windows control 8.1 everything is somehow clear - I am writing this post on it, and, in the process of writing, I add and look for bookmarks, that is, in IE everything functions quite tolerably.

I haven’t gotten to a tablet with Android yet, but they say that in the same mobile Chrome, the bookmarklet added to the toolbar in the desktop browser should be synchronized. And if synchronization is not configured, then you can add a bookmarklet manually by copying the javascript text into the address field of the bookmark being created. In order for the bookmarklet to work, you need to be on the page you want to bookmark, start typing the name of the bookmarklet in the address bar, and select it when it appears in the tooltip window. This is about adding new bookmarks. Working with the list of bookmarks and searching for the necessary bookmarks should be no different from working in a browser on a desktop. In theory.

Well, let's wait and see...

P.S. While I was checking spelling, adding pictures, and doing some other manipulations with the text of this message, I had the opportunity to check the statements related to mobile version Chrome for Android. I must say that they were confirmed! Everything worked out as promised: I created a bookmarklet by hand, and used it to add bookmarks through the title set. And the rest of the theory was confirmed by practice.

P.P.S. I want to note one more thing that I discovered for myself in the process of working on this message. This is case-insensitive filenames. It turns out that this property can be controlled! AT Windows registry in a branch

HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Kernel

There is a variable

ObCaseInsensitive(REG_DWORD)

So, if the value of this variable is set to 0, then the system will begin to react to the case of letters in the names of file and directory names. Truly, live a century - learn a century!

Bookmarklet (English) bookmarklet from bookmark- bookmarks and applet- applet) is a browser bookmark that executes a small JavaScript code specified in its URL, starting with the prefix javascript: .

Bookmarklets can be a good alternative to browser extensions for a number of simple tasks. On the one hand, they execute a small JavaScript code only when requested by the user. On the other hand, they do not take up computer memory when the browser is launched, as is the case with browser extensions.

On this page, I decided to collect the bookmarklets I wrote and give links to articles published on the blog with their detailed description. I think it will be much more convenient and practical.

Keywords:

• (formerly YLW) — collection of highlighted keywords in Yandex.
• - collection of highlighted keywords in Google search results.
• - determining the density of keywords on the page: Saved copy > View text copy - in Yandex.
• EWS- exports data from the wordstat.yandex.ru service to CSV format
• — a simplified version of the EWS bookmarklet for exporting keywords from the “What were you looking for with a word…” table of the Yandex “Word Selection” service (wordstat) to a text list that opens in a new tab or browser window. The list contains only keywords, without frequency, but stripped of plus signs (+).

Numbering:

• (previously yaNum) — Yandex issue numbering
• (previously gNum) - numerates the search results in the search results Google systems

• NEW! ySERP URLs - displays a list of URLs of search results in the Yandex search engine results
• gSERP URLs - lists the URLs of search results in Google search results
• - collection of URLs of links divided into groups: internal (local) and external (external).

Pictures:

• - displays a list of thumbnails and image URLs on the current web page
• - displays a list of thumbnails, image URLs and their sources for Google image search results

• - Comments and Shares to Google+ URLs.

Other:

• - export of all meta-data with name, http-equiv and property from the HEAD section of the web page.
• - export URLs from feedly.
• — checking the web page for the presence of elements with a font size of less than 12px in accordance with the new requirements of the Yandex Vladivostok algorithm.
• Removed the hide CSS class from elements with the blog-admin CSS class, which is used for the edit link on Blogger blogs.
• — displaying a link in the exchange for buying links from social networks addMeFast.

According to the rating live internet, the share of browsers based on the Blink engine in Runet is 65% . This is the same engine that runs on the Chromium multiprocessor architecture. For example: Google Chrome, Yandex.Browser, Amigo Mail.ru, etc. Therefore, my instructions are tailored for them. Although, the principle is the same.

How to install bookmarklet?

installation (English) install) bookmarklet is the same as adding a link to your browser bookmarks, but let's look at it in more detail.

1. Open a browser window.
2. Make sure Bookmarks Bar is displayed. If it is missing, try using the key combination Ctrl + Shift + B.
3. Go to the "bookmarklet link" page.
4. Hover over the "bookmarklet link", click the "left" mouse button and (while holding the button) drag the "bookmarklet link" to the "Bookmarks Bar".

How to create a bookmarklet?

creation (English) create) bookmarklet is the same as creating a bookmark, except that JavaScript code is called instead of the URL of the link, but we will deal with this in more detail.

1. Open a browser window.
2. Create a new bookmark. To do this, try using the key combination Ctrl + D.
3. In the created bookmark window that opens, click the " Change».
4. In the bookmark editing window that opens, write the name of the bookmarklet in the "Name" field and the JavaScript code with the javascript: prefix (at the beginning) in the "URL" field. To optimize JavaScript code, I recommend using online service compression "".
5. Click the button " Save».

How to use bookmarklet?

Use (English) use) bookmarklet is the same as using any other bookmark, i.e. by clicking on the bookmark in the "Bookmarks Bar" or "Bookmark Manager".

A feature of using bookmarklets is that instead of clicking on the URL of the link, JavaScript code is executed.

Depending on the tasks that the bookmarklet is solving, the execution of its code must occur under appropriate conditions.

For example, if you want to number the Yandex search results using my "" bookmarklet, you need to open the search engine results page and only then click the bookmark.

How to remove bookmarklet?

removal (English) delete) bookmarklet is the same as deleting any other bookmark.

1. Open a browser window.
2. If "Bookmarks Bar" displayed: find a bookmarklet on it, move the cursor over it and click the right mouse button, and in the menu that opens - the item " Delete».
3. If "Bookmarks Bar" not displayed: click the button Settings and Google management Chrome» (it's in the top left corner of the browser window), hover over the item/list " Bookmarks", find the bookmarklet, move the cursor over it and right-click, and in the menu that opens - the item" Delete».

Page change

If your bookmarks have suddenly disappeared, don "t worry - you should be able to recover them. This article explains how to get back your bookmarks if they disappeared unexpectedly.

• If you are able to add, delete, and edit your bookmarks but the changes are lost when you restart Firefox, see Can "t add, change or save bookmarks - How to fix .

Table of Contents

My Bookmarks Toolbar is missing

If you were using the Bookmarks Toolbar for quick access to your favorite bookmarks and the toolbar is now missing, you may have turned off the option to display the Bookmarks Toolbar. To turn it back on:

• Right-click on an empty section of the navigation bar and select Bookmarks Toolbar in the pop-up menu.

• On the menu bar, click View , select Toolbars , and then select Bookmarks Toolbar .

I can't find all of my bookmarks and folders

Follow these steps to add a Bookmarks Menu toolbar button that shows all of your bookmarks and folders:

A Bookmarks Menu toolbar button will appear on the toolbar next to the Library button.

My bookmarks have disappeared

To recover bookmarks that were previously saved in the Bookmarks menu or on the Bookmarks toolbar but are now missing, see Restore bookmarks from backup or move them to another computer .

There is an "Old Firefox Data" folder on my desktop

In some cases, Firefox may create a folder on your desktop called "Old Firefox Data". This folder contains a complete backup of your Firefox and can be used to restore bookmarks and other missing information. If you have this folder on your desktop, see Recovering important data from an old profile .

No bookmarks are visible after installing an add-on

If you have restarted Firefox after installing an add-on and your bookmarks are gone, it's possible that Firefox did not close properly before restarting itself. To recover your bookmarks, restart your computer.

I can't find my bookmarks after importing them

If you have imported your bookmarks from another browser, they may appear in the Bookmarks menu in a specific folder. To find your imported bookmarks, do the following:

• Depending on the type of browser from which you imported, your bookmarks may appear in a specially named folder in the Bookmarks list.
  • Internet Explorer - Folder name is From Internet Explorer.
  • Opera - Folder name is From Opera.
  • Bookmarks imported from other browsers follow a similar pattern.
• If your source bookmarks were stored in a hierarchy of folders, the folder structure is preserved inside the specially named folder.

If desired, you can move your imported bookmarks to other folders. For more information, see Bookmarks in Firefox .

I can see only the default set of bookmarks in the Bookmarks folder

Your bookmarks are associated with the Firefox you are using. Most Firefox users only have a single, default profile. However, there may be instances when you or Firefox creates a new profile. When this new profile is activated, it contains the default set of bookmarks which may give you the impression that you have lost your personal bookmarks. This troubleshooting sequence helps you to identify if a new profile has been created and how to restore your previous profile.

Determine if Firefox has created a new profile

You can open the Profile Manager to see if another profile exists, which may contain your missing bookmarks, as follows:

type about:profiles into the Firefox address bar and press the Enterreturn key. This will open the About Profiles page.

This page should list at least one profile and could list many. The profile that Firefox is currently using will have this:
This is the profile in use and it cannot be deleted.

If you have another profile listed on this page, it may contain your lost bookmarks. You can click the Launch profile in new browser button to open another Firefox window using that profile. If it contains your missing bookmarks, you can set it as the profile that Firefox will open by default. Click the Set as default profile button for that profile and Firefox will use it automatically the next time you open Firefox.

Allows you to complete tasks with a single click. This article explains what bookmarklets are, how to install them, and how to use them.

What actions can bookmarklets perform?

The bookmarklet is a "one-click" tool that extends the browser experience by adding features such as changing appearance web pages, search for selected text in search engines, sending the page to an automatic page translation service or blog.

How are bookmarklets different from extensions?

• They perform basic tasks on click.
• They are universal, i.e. they usually work in any browser, not just Firefox, and they also work regardless of platforms, mobile or desktop.
• They are managed like any bookmark. For more information, see How to use bookmarks to remember and organize your favorite sites.

How to install bookmarklets?

Installing the bookmarklet is simple:

1. Make the Bookmarks Bar visible by clicking right clickmouse button holding Ctrl in the empty space of the tab title bar and checking "Bookmarks bar" in the context menu.
2. Drag the bookmarklet from the page to the Bookmarks Bar. It should appear on the toolbar.

OK it's all over Now!

The process is the same in other browsers. Usually the hardest part is displaying the bookmarks bar. Well, then you know what to do.

How to use bookmarklet?

All you have to do is:

1. Go to the page where you want to use your bookmarklet.
2. Click on the bookmarklet in the bookmarks bar.

Where can I find bookmarklets?

Now that you know what bookmarklets are, how to install and use them, check out some interesting bookmarklets and start building your own collection!

• Readability removes redundant sidebars and enlarges the text, making the page easier to read.
• Microsoft Translator Bookmarklet detects the original language of the page text and translates it into your language. This bookmarklet does not work on secure (https://) websites.

You can find more bookmarklets at