Jump to content

ССС и внедрение sprite


Recommended Posts

Хотел бы узнать про sprite, внес изменения в файлы css, все хорошо работает, но если включать ССС для css файлов, то sprite не работает, а не включать ССС нельзя, page speed резко падает, но и sprite очень хочется включить т.к. прибавка в 5%. Как быть, уважаемые?

Edited by aeroplah (see edit history)
Link to comment
Share on other sites

Спасибо большое за отзыв, я правильно понимаю, что нужно включить первые два (или или все?) неактивированные пункты?

Активировал первые два пункта, в гугле поднялось до 45% а в slow до 77%

post-425877-0-17293500-1355069327_thumb.jpg

Edited by aeroplah (see edit history)
Link to comment
Share on other sites

Спасибо за ответ, но в моем случае memcache на сервере значительно помогает, после включения gzip на серваке page speed стал 61, хотел бы узнать про sprite, внес изменения в файлы css, все хорошо работает, но если включать ССС для css файлов, то sprite не работает, а не включать ССС нельзя, page speed резко падает, но и sprite очень хочется включить т.к. прибавка в 5%. Как быть, уважаемые?

Link to comment
Share on other sites

Чтобы не быть голословным, вот мой рабочий сайт (сорри есть постить ссылки запрещено).

Я смотрел главную страницу с помощью вот этого - http://spriteme.org/ , на главной sprite можно сделать из 5 изображений (поиск, корзина и т.д., да и спрайтов на странице больше нет), генерируем их, потом получаем код с помощью export CSS и меняем указанные им файлы.

Если не включен CCC, то предлагается сделать замену в 4 файлах стилей,

Если стоит, то в 1, который находится: тема/e9e0ab0c4c4a29de45c8bec21cfc56f4_all.css, я пробывал менять в 4 файлах и только затем включать ССС, мне кажется так более правильным, не знаю, может поменять в файле, который генерируется при сжатии стилей, но меня смущает, что он находится в кеше

Edited by aeroplah (see edit history)
Link to comment
Share on other sites

Делать замену в 4 файлах стилей. Но вам дают не совсем правильный код, если он портится при ССС. Посмотрите как сделаны спрайты в коде

  • Like 1
Link to comment
Share on other sites

спасибо, буду копать в этом направлении

а где можно посмотреть реализацию спрайтов на престе?

думал на демо сайте престы ( http://demo-store.prestashop.com/en/ ) уже немного реализовано, но там еще большее раздолье для работы)

Кажется разобрался... при сжатии образуется в css вот такая ссылка на файл со спрайтом

 

отсюда и проблема, осталось понять, что заменить

Edited by aeroplah (see edit history)
Link to comment
Share on other sites

Уважаемые, как грамотно заменить вот этот код

background:url(img/search_btn.png) no-repeat;

 

на нужную мне ссылку т.к. если оставлять тег url и делать

background:url(http://сайт/папка/спрайт) no-repeat; - то при сжатии (без сжатия все ок) образуется некорректная ссылка формата

сайт/тема/стили/модуль/сайт/папка/спрайт

 

Не обладая знаниями становится сразу понятно, что url = сайт/тема/стили/модуль

 

Чем заменить?

Edited by aeroplah (see edit history)
Link to comment
Share on other sites

Вообще-то url — не тэг, а ссылка на относительный адрес. Так же как src — на абсолютный. И в приведённом примере кода (background:url(img/search_btn.png) no-repeat) у Вас нет того, что делает спрайт спрайтом — позиционирования картинки. Спрайт — это ж сборная картинка, части которой показываются так, как это задано в CSS: в одном случае показывается один участок, в другом — другой. Простейший пример — это кнопки, которые меняют свой цвет при наведении курсора. В ПШ все они на спрайтах и работают как с CCC, так и без... А у Вас почему-то — нет. Проблема, скорее всего, в том, что у Вас неправильно сгенерирован сам спрайт, как Вам уже писал Sors. Ну, так попробуйте другой генератор! В Сети их дополна.

Link to comment
Share on other sites

Правильно так

background:url(../img/sprite.png) no-repeat;

 

Спасибо, попробую еще раз, но уже раньше вводил, получается сайт/тема/стили/модуль/../папка/спрайт.

Вариант не работает даже если не включать сжатии

Работает только в том случае если указывать

background:url no-repeat;

Но опять...только до сжатия( Печально все

Edited by aeroplah (see edit history)
Link to comment
Share on other sites

Вообще-то url — не тэг, а ссылка на относительный адрес. Так же как src — на абсолютный. И в приведённом примере кода (background:url(img/search_btn.png) no-repeat) у Вас нет того, что делает спрайт спрайтом — позиционирования картинки. Спрайт — это ж сборная картинка, части которой показываются так, как это задано в CSS: в одном случае показывается один участок, в другом — другой. Простейший пример — это кнопки, которые меняют свой цвет при наведении курсора. В ПШ все они на спрайтах и работают как с CCC, так и без... А у Вас почему-то — нет. Проблема, скорее всего, в том, что у Вас неправильно сгенерирован сам спрайт, как Вам уже писал Sors. Ну, так попробуйте другой генератор! В Сети их дополна.

Вы правы, конечно, ссылка не на спрайт, я привел пример того, что в начальном стиле написано, я меняю на img/spriteme1, но файл стилей находится по адресу сайт/тема/стили/модуль , а спрайт находится по адресу сайт/img

А так вот он сам спрайт

Edited by aeroplah (see edit history)
Link to comment
Share on other sites

×
×
  • Create New...